Technologies›SwiftUI›Hover and Pointer Effects

HoverEffectGroup struct

iOSmacOStvOSwatchOSvisionOS✓ renders

Describes a grouping of effects that activate together.

How it works

A HoverEffectGroup ties the hover effects of several views together so they respond as a single unit: when a pointer interacts with one member, every view in the group activates its effect simultaneously. Without a group, each view's hover effect is isolated and only reacts to the pointer that sits directly over it. Reach for HoverEffectGroup when a collection of related controls or glyphs should feel like one connected surface — a toolbar, a segmented row, or a cluster of icons — rather than a set of independent targets.

  1. Identify the group with HoverEffectGroup(id:)

    A group is created by initializing HoverEffectGroup with an identity that all members share. In the example the identity comes from a namespace, group, declared with @Namespace private var group, and passed as HoverEffectGroup(id: group). Every view constructed with the same identity belongs to the same coordinated set.

  2. Declare the shared identity once with @Namespace

    Because membership is keyed on identity, the views need a stable, shared token. @Namespace private var group provides exactly that — a single value that can be handed to each HoverEffectGroup(id:) so the framework knows the views are siblings in one group rather than coincidentally similar.

  3. Join each view to the group via hoverEffect(_:in:)

    A view opts into the group through the in: parameter of hoverEffect(_:in:), supplying the HoverEffectGroup. Here each Image(systemName: name) calls .hoverEffect(.highlight, in: HoverEffectGroup(id: group)), attaching the same group to all three icons so they fire together.

  4. Choose the effect that the group plays

    The first argument to hoverEffect(_:in:) is the HoverEffect every member runs in unison — .highlight in the example. The group coordinates *when* the effect plays; this value defines *what* plays, and giving each member the same effect makes the activation read as one motion.

Try it — Give the middle icon a distinct namespace by adding a second @Namespace private var other and passing HoverEffectGroup(id: other) to only the "heart.fill" image — now hovering any icon highlights the star and bookmark together while the heart stays independent.

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.

HoverEffectGroup.swift
struct HoverEffectGroupDemo: View {
    @Namespace private var group

    var body: some View {
        HStack(spacing: 16) {
            ForEach(["star.fill", "heart.fill", "bookmark.fill"], id: \.self) { name in
                Image(systemName: name)
                    .font(.title)
                    .padding()
                    .hoverEffect(.highlight, in: HoverEffectGroup(id: group))
            }
        }
        .padding()
    }
}
Live preview
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →