SwiftUI - Hover Effect

---

---

The Hover effect in SwiftUI highlights the view when the user moves their mouse pointer or brings a finger(in touch screens) over a UI component such as button, link, image, text, tab, etc.

This is the most commonly used effect to enhance the user experience by explaining to them which UI component is clickable. The hover effect includes various visual changes such as highlighting the component, lifting the component, etc.

Initially it was introduced for macOS, iOs, and iPadOS, now it is available for all the Apple's platform such as tvOS, watchOS, visionOS. In SwiftUI, we can apply hover using any of the following modifiers −

• hoverEffect()
• defaultHoverEffect()
• onHover()

The hoverEffect() Modifier in SwiftUI

SwiftUI supports a pre-defined hover modifier that is hoverEffect(). The hoverEffect() modifier is used to apply hover effect on the given component or view. It can work easily with any view or component. It supports three type of effects automatic, highlight and lift.

Syntax

Following is the syntax −

func hoverEffect(_effect:HoverEffect) -> some View

This modifier takes only one parameter that is the effect. It represent the effect that will apply to the specified view. It can have any one value among the following values −

• .automatic: It is the default effect. It tries to determine hover effect automatically.
• .highlight: It morphs the pointer into a platter in the back of the view and display a light source indicating the position of the view.
• .lift: It scales up the view with a shadow whenever the pointer placed over the view.

Example

The following SwiftUI program is used to apply hover effect on the given view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      HStack{
         Text("TAP ME")
            .font(.headline)
            .foregroundStyle(.green)
            .hoverEffect(.lift)
            .onTapGesture {
               print("BOOM!")
            }
      }
   }
}
#Preview {
   ContentView()
}

Output

The defaultHoverEffect() Modifier in SwiftUI

The defaultHoverEffect() modifier is used to apply default hover effect on the all components present inside the given view.

Syntax

Following is the syntax −

fund defaultHoverEffect(_effect:HoverEffect) -> some View

This modifier takes only one parameter that is the effect. It represent the default effect that will apply to the specified view and its components. The value of this parameter can be .automatic, .lift, or .highlight.And the default value of this modifier is .automatic.

Example

The following SwiftUI program is used to apply hover effect on the given view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      HStack{
         RoundedRectangle(cornerRadius: 5)
            .fill(.mint)
            .frame(width: 150, height: 100)
            .overlay(
               Text("Click").font(.largeTitle))
      }.defaultHoverEffect(.automatic)
   }
}
#Preview {
   ContentView()
}

Output

The onHover() Modifier in SwiftUI

The onHover() modifier is used to insert an action that will perform whenever the user moves the mouse pointer over or away from the given view.

Syntax

Following is the syntax −

fund onHover(perform action:@escaping(Bool)->Void) -> some View

This modifier takes only one parameter that is the action. It represent the action that we want to perform whenever the pointer moves in or out from the given view's frame. This action closure passes true whenever the pointer enters in the give view's frame, otherwise, it will passes false.

Example

The following SwiftUI program is used to apply hover effect on the given view.

import SwiftUI

struct ContentView: View {
   @State private var output = false
   var body: some View {
      Text("TutorialsPoint")
         .foregroundStyle(output ? .orange : .purple)
         .scaleEffect(output ? 2.3 : 1.5)
         .onHover{x in output = x }
   }
}
#Preview {
   ContentView()
}

Output