onmouseover (HTML element)

Share this article

Description

The onmouseover attribute is one of the most commonly used event attributes. It captures the moment that a cursor crosses the boundary of an element, moving from outside to inside the element to which the attribute is applied. It differs from the onmousemove attribute, which is used to detect movement within the element’s boundaries. Once the cursor is positioned over the element, the onmouseover event remains active until the cursor is moved beyond the element’s boundaries—an event that the onmouseout attribute would capture. The onmouseover attribute is mostly used to render visual effects such as image swapping or color changes, and has been used in this way for almost as long as JavaScript has been around. Note that this event attribute cannot be applied to the following elements:
  • applet
  • base
  • basefont
  • bdo
  • br
  • font
  • frame
  • frameset
  • head
  • html
  • iframe
  • isindex
  • meta
  • param
  • script
  • style
  • title

Example

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>

Value

This 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.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Full Full Full Full Full Full Full Full Full Full Full
Every browser listed supports this attribute. However, inline event handlers such as this should be avoided. In the same way that inline CSS styles are frowned upon but externally defined CSS styles are considered good practice, inline event handlers should be stripped out and replaced with events attached unobtrusively through the DOM.

Frequently Asked Questions (FAQs) about HTML Onmouseover Event

What is the HTML onmouseover event and how does it work?

The HTML onmouseover event is a JavaScript event attribute that triggers a specific action when the mouse pointer hovers over an HTML element. This event is commonly used to create interactive effects on web pages. For instance, you can change the color of a button when the mouse hovers over it, or display a tooltip with additional information. The onmouseover event is implemented in HTML code using the onmouseover attribute followed by an equal sign and the JavaScript function to be executed.

How can I use the onmouseover event in HTML?

To use the onmouseover event, you need to add the onmouseover attribute to the HTML element you want to apply the event to. The value of this attribute should be a JavaScript function or code that will be executed when the mouse pointer hovers over the element. Here’s a simple example:

<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?

No, you can only use one onmouseover event per HTML element. However, you can execute multiple actions within the same onmouseover event by including multiple statements in the JavaScript function or code. These statements should be separated by semicolons.

How can I stop the onmouseover event from triggering?

You can stop the onmouseover event from triggering by removing the onmouseover attribute from the HTML element or by setting its value to null in JavaScript. Alternatively, you can use the event.stopPropagation() method in your JavaScript function to prevent the event from bubbling up to parent elements.

Is the onmouseover event supported in all browsers?

Yes, the onmouseover event is supported in all major web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, the exact behavior of the onmouseover event may vary slightly between different browsers due to differences in their JavaScript engines.

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.

How can I debug the onmouseover event in JavaScript?

You can debug the onmouseover event using the developer tools in your web browser. These tools allow you to inspect the HTML code, view the JavaScript console, and set breakpoints in your JavaScript code. If the onmouseover event is not working as expected, you can check the JavaScript console for error messages.

Can I use the onmouseover event with other JavaScript events?

Yes, you can use the onmouseover event in combination with other JavaScript events, such as onclick, ondblclick, onmousedown, onmouseup, and onmousemove. This allows you to create complex interactive effects on your web pages. However, you should be careful not to create confusing or unexpected behavior for your users.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week