How it works
ContentHoverEffect describes how a view should respond when a pointer hovers over it on platforms that have one, such as iPadOS with a trackpad or visionOS with eye and hand focus. Rather than wiring up your own hover gestures and animations, you choose one of the built-in effects and let the system apply the appropriate transformation, picking the look and feel that fits the current platform. Reach for it whenever an interactive element should give the same kind of pointer feedback users expect from system controls, without writing that feedback by hand.
Apply an effect with hoverEffect(_:)
You don't construct a ContentHoverEffect directly; you pass one of its values to the hoverEffect(_:) view modifier, which installs the effect on the view it's attached to. In the example,
.hoverEffect(.highlight)is applied to a text card and.hoverEffect(.lift)to an icon, so each becomes a hover target whose feedback the system manages.Choose .highlight to morph into a backdrop
The
.highlighteffect, used here as.hoverEffect(.highlight), draws the pointer into the content by morphing it onto a soft highlighted backdrop as focus arrives. It suits flat, tappable regions like theText("Hover Me")card, signalling that the whole shape is one interactive element.Choose .lift to raise the content
The
.lifteffect, written.hoverEffect(.lift)on theImage(systemName: "star.fill"), slides the pointer under the content and lifts it slightly with a shadow, giving a sense of depth. It reads well for discrete, glyph-like elements that should feel like they pop forward on focus.Let the effect track the view's shape
ContentHoverEffect conforms to the shape of the content it decorates, so the highlight or lift follows the view's bounds and any clipping. Because the text card is clipped with
clipShape(RoundedRectangle(cornerRadius: 12)), the.highlighteffect honors those rounded corners instead of a plain rectangle.
.hoverEffect(.lift) on the star image to .hoverEffect(.highlight) and hover it to compare how the same icon feels under each effect.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ContentHoverEffectDemo: View {
var body: some View {
VStack(spacing: 20) {
Text("Hover Me")
.padding()
.background(.blue.opacity(0.2))
.clipShape(RoundedRectangle(cornerRadius: 12))
.hoverEffect(.highlight)
Image(systemName: "star.fill")
.font(.largeTitle)
.foregroundStyle(.yellow)
.padding()
.hoverEffect(.lift)
}
.padding()
}
}