onmouseover

The onmouseover event is triggered when the mouse pointer enters an element. It is frequently used in conjunction with the onmouseout event to manage interactions when the pointer enters or leaves an element.

onmouseover event

The onmouseover event activates a script when the mouse pointer hovers over an element. It's commonly used to create interactive effects or show information when users move the cursor over particular areas.

Syntax

In HTML

index.html

<element onmouseover="myScript">

In JS

script.js

object.onmouseover = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("mouseover", myScript);

Example

::event-onmouseover ::

index.html

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmouseover Event</h2>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

<script>
function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>

Values

<script>
- Specifies the <script> to run when the event is triggered.

Conclusion

The onmouseover event is useful for creating dynamic interactions when the mouse pointer enters an element. It allows developers to trigger scripts for effects or displaying information. Combining it with other events like onmouseout enhances interactivity and user experience.

onmouseout

The onmouseout event is triggered when the mouse pointer leaves an element. It is commonly used alongside the onmouseover event to manage user interactions when the pointer enters or exits an element.

onmouseup

The onmouseup event is triggered when a mouse button is released over an element. It follows a specific order of events for the left and middle mouse buttons.