How it works
GroupHoverEffect is a hover effect that treats several views as a single interactive unit, so a pointer entering any part of the group animates them all at once rather than highlighting each subview independently. Reach for it when a cluster of views — a row of labels, a card, a toolbar segment — should read as one target under the pointer on iPadOS, where a connected hardware pointer drives hover. Because the effect coordinates the whole group, you get a unified lift, highlight, or shape morph instead of a patchwork of separate responses.
Apply the effect with hoverEffect(_:)
You attach a
GroupHoverEffectthrough thehoverEffect(_:)modifier placed on the container that bounds the group. In the example,.hoverEffect(.lift)sits on theVStackso the pointer interacts with the twoLabelviews as one element. Putting the modifier on the enclosing view — not on each child — is what makes the response group-wide.Choose the built-in effect style
The argument selects which hover treatment the group performs.
.liftraises and subtly scales the content while morphing its background toward the pointer;.highlighttints in place; and.automaticlets the system pick. Here.liftlifts the whole label stack together, giving the cluster a single coordinated motion.Shape the effect with the group's background
The hover effect follows the visual bounds of the view it's applied to, so the surrounding shape defines the silhouette that lifts and highlights. In the example,
.background(.quaternary, in: RoundedRectangle(cornerRadius: 12))gives the group a rounded card, and the.lifteffect honors thatRoundedRectanglecorner radius as it animates. Padding before the background sets how much of the content the effect encloses.Keep the effect inside the group's bounds
Because
GroupHoverEffectis scoped to the modified view's frame, the inner.padding()(applied before.background) widens the hit and highlight region around the labels, while the trailing.padding()only spaces the card from its surroundings. Only what falls within the view carryinghoverEffect(.lift)participates in the shared response.
.hoverEffect(.lift) to .hoverEffect(.highlight) to see the whole label group tint together in place instead of lifting as one raised card.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 GroupHoverEffectDemo: View {
var body: some View {
VStack(spacing: 12) {
Label("Favorites", systemImage: "star.fill")
Label("Recents", systemImage: "clock.fill")
}
.font(.headline)
.padding()
.background(.quaternary, in: RoundedRectangle(cornerRadius: 12))
.hoverEffect(.lift)
.padding()
}
}