How it works
HoverEffect describes the visual effect a view shows while a pointer hovers over it, giving people targeting feedback on platforms that have an indirect pointer, such as iPadOS with a trackpad or visionOS. Rather than animating hover transitions yourself, you choose one of the system-defined effects and let SwiftUI morph the view as the pointer enters and leaves it. Reach for it whenever an interactive element should signal that it's a valid target — buttons, list rows, images, or any custom control — and you want behavior that matches the platform's conventions and respects accessibility settings.
Apply an effect with hoverEffect(_:)
You don't construct a
HoverEffectdirectly; instead you pass one to thehoverEffect(_:)modifier, which installs it on the view and registers the view as a hover target. In the example,.hoverEffect(.highlight)attaches an effect to theImage, and.hoverEffect(.lift)attaches one to theTextcapsule.Choose the .highlight effect
The
highlighteffect morphs the pointer into the shape of the view and draws a soft highlight behind it, which suits content-like targets such as icons. Here.highlightis applied to thestar.fillImage, so the pointer settles onto the glyph as it hovers.Choose the .lift effect
The
lifteffect raises the view above the surrounding content with a shadow and slight scale, reading as a tappable, button-like surface. The example uses.lifton theText("Hover Me")label, which already has a blueCapsule()background, so the whole pill appears to float on hover.Fall back to .automatic
When you want the system to pick an appropriate effect for the context, use
.automatic, the default effect type. The two cards in the example name.highlightand.liftexplicitly, but swapping either for.automaticlets SwiftUI choose based on the platform and the kind of view.
.hoverEffect(.lift) on the Text("Hover Me") capsule to .hoverEffect(.highlight) and compare it against the star to see how lift's floating shadow differs from highlight's shape-conforming glow.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 HoverEffectDemo: View {
var body: some View {
VStack(spacing: 24) {
Image(systemName: "star.fill")
.font(.largeTitle)
.padding()
.hoverEffect(.highlight)
Text("Hover Me")
.padding()
.background(.blue, in: Capsule())
.foregroundStyle(.white)
.hoverEffect(.lift)
}
.padding()
}
}