use_element_hover
Reactive element’s hover state.
Demo
Usage
use leptos::prelude::*;
use leptos::html::Button;
use leptos_use_element_hover::use_element_hover;
#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Button>::new();
let is_hovered = use_element_hover(el);
view! {
<button node_ref=el>{ move || format!("{:?}", is_hovered.get()) }</button>
}
}Server-Side Rendering
Make sure you follow the instructions in Server-Side Rendering.
On the server this returns a Signal that always contains the value false.
Installation
cargo add leptos-use-element-hover
Options
UseElementHoverOptions
Options for use_element_hover_with_options.
Every option is set with a builder method of the same name, e.g. UseElementHoverOptions::default().delay_enter(...). See also the API docs.
delay_enter
Type: u64
The time in ms the mouse has to be hovered over the element before the signal is changed to true. Defaults to 0.
delay_leave
Type: u64
The time in ms after the mouse has left the element before the signal is changed to false. Defaults to 0.