Javascript onmouseover 事件有效但需要在鼠标上反转 "not over"

Question

所以我有：

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

效果很好，但是一旦我悬停并且第二个图像打开，我需要在我移除光标时将其关闭。有什么方法可以用我拥有的简单内联 JS 来实现吗？

Answer 1

您可以使用 jQuery 并使用 .hover 函数。此函数为您执行 mouseenter 和 mouseleave 功能，因此您只需要指定应该发生的事情。

此外，您应该在 CSS 文件中指定样式。

此解决方案不会为您提供内联解决方案，但会减少您的代码并分离您的关注点。

这是你的Javascript。我在 div 中使用更改文本来向您展示一个示例而不是切换图像，因为我手边没有图像，但使用它作为示例应该很简单。

$("#hoverExample").hover(
  function () {
    $(this).text("Mouse has entered");
  },
  function () {
    $(this).text("Mouse has left");
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hoverExample">Hover over this div</div>

Answer 2

只需通过设置 src 以相同的方式撤消更改：

<img src="image1.png" width="300" height="115" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';">

Javascript onmouseover event working but need to reverse upon mouse "not over"