JavaScript mouseover and mouseout Events

mouseover fires when the pointer enters an element or one of its descendants; mouseout fires when it leaves. The original plus2net table-row and image-rollover facilities are preserved below, with modern event listeners.

mouseover and mouseout on a Table Row Top ↑

On mouseover the row changes to the original cyan color; on mouseout it changes to the original yellow color.

const row = document.getElementById('hoverRow');
row.addEventListener('mouseover', () => {
  row.style.background = '#0fffff';
});
row.addEventListener('mouseout', () => {
  row.style.background = '#ffff00';
});

Image Rollover on mouseover and mouseout Top ↑

The original tutorial uses these two images:

Move the pointer over this linked image to swap it, then move out to restore it:

const link = document.getElementById('singleRolloverLink');
const image = document.getElementById('singleRollover');
link.addEventListener('mouseover', () => { image.src = 'images/wrong.jpg'; });
link.addEventListener('mouseout', () => { image.src = 'images/correct.jpg'; });

Using Multiple Images Top ↑

The original three additional rollover controls are retained. Each pair uses its own image element rather than the legacy image-name lookup.

document.querySelectorAll('.rollover').forEach((link) => {
  const image = link.querySelector('img');
  link.addEventListener('mouseover', () => { image.src = link.dataset.over; });
  link.addEventListener('mouseout', () => { image.src = link.dataset.out; });
});

Complete HTML for the Rollover Examples Top ↑

<table><tr id="hoverRow">
  <td>This is a table cell</td>
  <td>This is another cell</td>
</tr></table>

<a href="../" id="singleRolloverLink">
  <img src="images/correct.jpg" id="singleRollover" alt="Correct mark changes on hover">
</a>

<a href="../" class="rollover" data-over="images/cross2.png" data-out="images/tick2.png">
  <img src="images/tick2.png" alt="Tick 2 rollover">
</a>
<!-- Repeat the same pattern for tick3/cross3 and tick4/cross4. -->

mouseover/mouseout vs mouseenter/mouseleave Top ↑

mouseover and mouseout bubble, so they can fire as the pointer moves between descendant elements. When you only care about entering or leaving the element itself, mouseenter and mouseleave may be simpler.

← Event Handling onMouseDown and onMouseUp →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: