Skip to main content
.onHover(action: (isHovering: boolean) => void): Component
​
action
(isHovering: boolean) => void
required
A callback that receives true when the pointer enters the component and false when it leaves.

​
Support

​
Usage

​
Hover highlight

const body = () => {
    const [hovered, setHovered] = useState(false)

    return Text("Hover me")
        .padding(16)
        .background(hovered ? Color("blue").opacity(0.1) : Color("clear"))
        .cornerRadius(8)
        .onHover((isHovering) => setHovered(isHovering))
}

​
Changing text on hover

const body = () => {
    const [hovered, setHovered] = useState(false)

    return Text(hovered ? "Hovered!" : "Hover me")
        .foregroundStyle(hovered ? Color("blue") : Color("gray"))
        .onHover((isHovering) => setHovered(isHovering))
}

​
Scale effect on hover

const body = () => {
    const [hovered, setHovered] = useState(false)

    return Image({ url: "thumbnail.jpg" })
        .resizable()
        .frame({ width: 100, height: 100 })
        .scaleEffect(hovered ? 1.05 : 1)
        .onHover((isHovering) => setHovered(isHovering))
}

​
Notes

  • This modifier is primarily useful for web and desktop pointer interactions. On touch-only devices, hover events do not occur.
  • Currently only supported on the web platform.

​
See Also