Hover
In computing, hovering refers to moving the cursor over an interactive element — such as a link, button, or icon — without clicking it. For example, when you hover over a link on a webpage, the cursor may change from an arrow to a hand, and the link may change color to indicate it is clickable.
Web developers can add hover effects using HTML, CSS, or JavaScript.
- HTML provides a global event attribute onmouseover, which can be added to a link or button.
<button onmouseover="myFunction()";>Hover over me</button>
- CSS provides the pseudoclass :hover that defines how an element should look when the pointer is resting over it (for example, changing color or underlining the text).
a:hover { color:darkblue; text-decoration: underline; }
- JavaScript provides mouseover and mouseout events that can trigger functions or other code using an "EventListener" method.
myElement.addEventListener("mouseover", function() { ... }
The concept of hovering extends beyond websites. Many operating systems and desktop applications highlight icons, buttons, or menus when you hover the cursor over them. Some elements show a tooltip when you hover over them for one or two seconds. Hovering feedback makes user interfaces more intuitive by providing extra information between pointing and clicking.
Hovering and Touchscreens
Since hovering requires a cursor, it generally does not apply to touchscreens, where interaction is mostly through taps and gestures. On mobile devices, designers often use alternatives like press-and-hold or visual cues to provide similar feedback.