How to call JS function on "hover" from HTML?

Question

I have to catch "hover" and after call JS function. I call it from html. But nothing happen. I tried also to use mouseover - also doesn't work from html. I have to catch "hover",but can't make event listener in JS file on "hover".I can put event listener on "mouseover" but it doesn't work correct when mouse moves fast). What mistake I do that I don't have any reaction on changeDef(event)?

function changeDef(event){
  console.log(event.target);
}

<img class="img-default" src="./img/footer1.png" hover="changeDef(event)">

Scott Marcus · Answer 1 · 2018-03-18T17:13:29.433

There is no "hover" event. You do use the mouseover event, which (when using HTML attributes to set up) is referenced with on in front of the event name. There won't be a problem with this event triggering even if the mouse is moving fast.

function changeDef(event){
  console.log(event.target);
}

<img class="img-default" src="./img/footer1.png" onmouseover="changeDef(event)">

But, you really should not use the 25+ year old technique of setting up event handlers via HTML attributes (which introduces a variety of issues) and, instead, follow modern standards and best practices by separating the JavaScript from the HTML:

// Get a reference to the element that you want to work with
var img = document.querySelector("img.img-default");

// Set up an event handler. Notice that we don't use "on" in front
// of the event name when doing it this way.
img.addEventListener("mouseover", changeDef);

function changeDef(event){
  console.log(event.target);
}

img { width:50px; }

<img class="img-default" src="http://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png">

Now, in CSS, there is a hover "state" that an element can be in, and if you just want to change styling of the element, you don't need any JavaScript at all:

img { width:50px; border:2px solid rgba(0,0,0,0); }

img:hover { border:2px solid red; }

<img class="img-default" src="http://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png">

I need JS. I have 5 img in line and they on hover change opacity to 0, and then display none, and other picture on it place. But with 'mouseover' everything works correct only if user dont move mouse to fast — Noa, Mar 18 '18 at 22:04

Asons · Accepted Answer · 2023-03-14T16:06:28.430

To actually mimic the CSS hover with script, you'll need two event handlers, mouseover and mouseout, here done with addEventListener.

Updated based on a comment, showing how to toggle a class that is using transition, and with that make use of its transition effect to make the "hover" look good.

Stack snippet (one using JS, one using CSS)

var images = document.querySelector('.images.js');

images.addEventListener('mouseover', changeDefOver);
images.addEventListener('mouseout', changeDefOut);

function changeDefOver(e) {
  e.target.classList.toggle('opacity-toggle');
}

function changeDefOut(e) {
  e.target.classList.toggle('opacity-toggle');
}

.images {
  position: relative;
}

.images2 {
  position: absolute;
  left: 0;
  top: 0;
}

.images2 img {
  transition: opacity 1s;
}

.images2 img.opacity-toggle {
  opacity: 0;
}

/* CSS hover */
.css .images2 img:hover {
  opacity: 0;
}

<div>This use JS</div>

<div class="images js">
  <div class="images1">
    <img class="img-default" src="http://placehold.it/100x100/f00">
    <img class="img-default" src="http://placehold.it/100x100/ff0">
    <img class="img-default" src="http://placehold.it/100x100/f0f">
    <img class="img-default" src="http://placehold.it/100x100/0ff">
    <img class="img-default" src="http://placehold.it/100x100/00f">
  </div>
  <div class="images2">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
  </div>
</div>


<div>This use CSS (hover)</div>

<div class="images css">
  <div class="images1">
    <img class="img-default" src="http://placehold.it/100x100/f00">
    <img class="img-default" src="http://placehold.it/100x100/ff0">
    <img class="img-default" src="http://placehold.it/100x100/f0f">
    <img class="img-default" src="http://placehold.it/100x100/0ff">
    <img class="img-default" src="http://placehold.it/100x100/00f">
  </div>
  <div class="images2">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
    <img class="img-default" src="http://placehold.it/100x100">
  </div>
</div>

I can't use 'mouseover' and 'mouseout' because when mouse moves fast it doesn't work correct. I have few img in line, and they all have effect 'mouseover' when mouse moves fast. They dont react on 'movesout' — Noa, Mar 18 '18 at 22:00
@Natalia Nothing of what you just described is available in the question, so if what you need help with isn't there, no one can give you a proper answer either. Still, based on your comment at another answer, I updated mine to show how you can do with images. — Asons, Mar 19 '18 at 13:51

How to call JS function on "hover" from HTML?

2 Answers2