The example below shows a simple image swap technique, whereby mousing over the image causes the image to change to one that reveals a location on a map:
<div> <img src="map.gif" alt="Hover to reveal the location on the map" onmouseover="this.src='map_location_revealed.gif';" onmouseout="this.src='map.gif';"/>Figures for February’s racing. </div>
ValueThis attribute has no fixed value. It’s up to the author to decide on the scripting that’s included here, be that a call to one or more defined functions, or a simple alert() statement.
Frequently Asked Questions (FAQs) about HTML Onmouseover Event
What is the HTML onmouseover event and how does it work?
How can I use the onmouseover event in HTML?
<button onmouseover="this.style.backgroundColor='red'">Hover over me</button>
In this example, the background color of the button changes to red when the mouse pointer hovers over it.
Can I use the onmouseover event with all HTML elements?
Yes, the onmouseover event can be used with almost all HTML elements. This includes text, images, buttons, form fields, and more. However, the effect of the onmouseover event may not be noticeable on some elements, such as hidden elements or elements without a visual representation.
What is the difference between onmouseover and onmouseout events?
The onmouseover event triggers when the mouse pointer enters an HTML element, while the onmouseout event triggers when the mouse pointer leaves an element. These two events are often used together to create interactive effects. For example, you can change the color of a button when the mouse hovers over it (onmouseover), and then change it back when the mouse leaves (onmouseout).
Can I use multiple onmouseover events on the same element?
How can I stop the onmouseover event from triggering?
Is the onmouseover event supported in all browsers?
Can I use the onmouseover event on mobile devices?
The onmouseover event is primarily designed for devices with a mouse pointer, such as desktop computers and laptops. On touchscreen devices, such as smartphones and tablets, the onmouseover event may not work as expected because there is no mouse pointer. Instead, you may want to use touch events, which are specifically designed for touchscreen devices.