onmouseover (HTML element)

The onmouseover HTML attribute triggers a JavaScript function when the mouse cursor moves over an element. Unlike onmousemove, which tracks movement within an element, onmouseover only fires once, when the cursor enters the element's boundaries. The effect persists until the cursor leaves (detected by onmouseout). Common uses include visual changes like image swaps or highlighting. However, it's crucial to note that this attribute is not supported by several HTML elements, including <applet></applet>, <base>, <basefont>, <bdo></bdo>, <br>, <font></font>, <frame>, <frameset></frameset>, , , <iframe></iframe>, <isindex>, <meta>, <param>, <script></script>, <style></style>, and <title></title>.

Example: Image Swap

This example demonstrates a simple image swap upon hovering:

<div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174062431250080.gif"  class="lazy" alt="onmouseover (HTML element) " /> Figures for February's racing.
</div>

Attribute Value

The onmouseover attribute's value is a JavaScript expression. This could be a function call, a series of JavaScript statements, or a simple alert.

Browser Compatibility

All major browsers support onmouseover. However, using inline event handlers like this is generally discouraged. Best practice involves separating JavaScript logic from HTML using unobtrusive JavaScript techniques that attach events via the DOM.

Frequently Asked Questions (FAQs)

This section addresses common questions about the onmouseover event:

• What is the onmouseover event? It's a JavaScript event that triggers an action when the mouse cursor enters an HTML element.

• How to use onmouseover? Add the onmouseover attribute to an element, assigning it a JavaScript function or code to execute.

• Which elements support onmouseover? Most HTML elements support it, excluding those listed above.

• Difference between onmouseover and onmouseout? onmouseover fires on entry, onmouseout on exit.

• Multiple onmouseover events? Only one onmouseover event per element is allowed, but multiple actions can be included within its JavaScript code.

• Stopping onmouseover? Remove the attribute, set its value to null, or use event.stopPropagation().

• Browser support? Widely supported across all major browsers.

• Mobile device support? Not ideal for touch devices; consider touch events instead.

• Debugging? Use browser developer tools.

• Combining with other events? Possible, but requires careful consideration of user experience.

The above is the detailed content of onmouseover (HTML element). For more information, please follow other related articles on the PHP Chinese website!