CODEWITHSUNDEEP
javascripthtmlhover
Noa
Noa

Reputation: 434

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

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)">

Upvotes: 8

Views: 50746

Answers (2)

Asons
Asons

Reputation: 87262

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>

Upvotes: 6

Scott Marcus
Scott Marcus

Reputation: 65855

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

Upvotes: 15

Related Questions