如何在 HTML 的“悬停”上调用 JS 函数？

Question

我必须在调用 JS 函数后捕捉“悬停”。我从 html 中调用它。但什么也没有发生。我也尝试使用鼠标悬停 - 也不适用于 html。我必须捕捉“悬停”，但不能在“悬停”上的 JS 文件中创建事件监听器。我可以将事件监听器放在“鼠标悬停”上，但是当鼠标快速移动时它不能正常工作）。 我犯了什么错误，我对 changeDef(event) 没有任何反应？

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

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

Answer 1

没有“悬停”事件。您确实使用了 mouseover 事件，该事件（在使用 HTML 属性进行设置时）在事件名称前用 on 引用。即使鼠标快速移动，触发该事件也不会有问题。

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

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

但是，您确实不应该使用 25 多年前通过 HTML 属性设置事件处理程序的技术（它引入了 a variety of issues），而是通过分离来遵循现代标准和最佳实践HTML 中的 JavaScript：

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

Answer 2

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

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

堆栈sn-p

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

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;
}

<div class="images">
  <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>

---

为了和 CSS 悬停比较，这里是它的版本

.images {
  position: relative;
}

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

.images2 img {
  transition: opacity 1s;
}

.images2 img:hover {
  opacity: 0;
}

<div class="images">
  <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>