如何从HTML"悬停"调用JS函数？

Question

我必须抓住"悬停"并调用JS函数.我从html中调用它.但什么都没发生.我也尝试使用鼠标悬停 - 也无法使用html.我必须抓住"悬停",但不能在"hover"上的JS文件中创建事件监听器.我可以将事件监听器置于"鼠标悬停"但是当鼠标快速移动时它不能正常工作).我犯了什么错误,我对changeDef(事件)没有任何反应？

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

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

Answer 1

要实际用脚本模拟 CSS 悬停，您需要两个事件处理程序，mouseover和mouseout，这里用 完成addEventListener。

根据评论进行更新，展示如何切换正在使用的类transition，并利用其过渡效果使“悬停”看起来不错。

堆栈片段（一个使用 JS，一个使用 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>

Answer 2

没有"悬停"事件.您确实使用了mouseover事件,on在事件名称前面引用了(当使用HTML属性进行设置时).即使鼠标快速移动,此事件触发也不会有问题.

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

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

但是,你真的不应该使用25年以上的通过HTML属性设置事件处理程序的技术(这会引入各种问题),而是通过将JavaScript与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">

现在,在CSS中,有一个元素可以处于悬停状态"状态",如果您只想更改元素的样式,则根本不需要任何JavaScript:

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