TechnologiesSwiftUIHover and Pointer Effects

HighlightHoverEffect struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A hover effect that highlights views using a light source to indicate

How it works

HighlightHoverEffect is one of SwiftUI's built-in hover effects, applied when a pointer-based input device — such as a trackpad, mouse, or Apple Pencil — moves over an interactive view. It morphs the content into a soft, rounded highlight that visually lifts the element toward the pointer, giving people clear feedback that the view is a hover target before they commit to a tap or click. Reach for it on controls and tappable surfaces where you want the platform's standard highlight treatment rather than a custom animation, letting the system match the look and timing of native interface elements.

  1. Apply the effect with hoverEffect(_:)

    You rarely construct HighlightHoverEffect by name. Instead you attach it through the hoverEffect(_:) view modifier, which takes a hover-effect value and installs the corresponding behavior on the view. In the example, .hoverEffect(.highlight) is what brings the highlight treatment to the Button.

  2. Select it through the .highlight shorthand

    The .highlight member is the type-inferred shorthand that resolves to HighlightHoverEffect. Passing it to the modifier — as in .hoverEffect(.highlight) — is equivalent to naming the struct directly, and is the idiomatic way to request this specific effect among the available hover effects.

  3. Attach it to a hover-capable view

    The effect needs a view that participates in pointer interaction to react against. Here it sits on a Button styled with .buttonStyle(.bordered); the bordered control gives the highlight a defined shape to grow into as the pointer arrives. Any interactive view in the hierarchy can host the modifier.

  4. Let the system drive shape and timing

    Once applied, HighlightHoverEffect automatically derives its rounded highlight geometry from the host view's bounds and animates in and out as the pointer enters and leaves — no parameters, frames, or animation curves to configure. The surrounding Label with cursorarrow.rays only annotates the demo; the effect itself is entirely declared by the single modifier.

Try it — Change .hoverEffect(.highlight) to .hoverEffect(.lift) and hover with a trackpad to contrast the highlight against the lift effect's scale-and-shadow treatment.

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.

HighlightHoverEffect.swift
struct HighlightHoverEffectDemo: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("Hover Effect: Highlight")
                .font(.headline)
            Button("Hover Over Me") {}
                .buttonStyle(.bordered)
                .hoverEffect(.highlight)
            Label("Highlights on pointer hover", systemImage: "cursorarrow.rays")
                .foregroundStyle(.secondary)
                .font(.caption)
        }
        .padding()
    }
}
Live preview
Hover Effect: Highlight Hover Over Me Highlights on pointer hover
Hover Effect: Highlight Hover Over Me Highlights on pointer hover
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →