鼠标悬停功能第一次不起作用

Question

有了这个功能，我想在鼠标悬停时用动画图像 (gif) 替换静态图像。但它不仅仅适用于 FIRST 鼠标悬停。有没有人可以帮助我？ JQuery 函数：

function mouseListener(imageDiv, image, animated, static)
{
  $(function() {
      $(imageDiv).hover(
           function() {
                 $(image).attr("src", animated);
           },
           function() {
                 $(image).attr("src", static);
           }                         
       );                  
   });
            }

HTML:

 <div onmouseover="mouseListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" id="would_youDiv" class="container">
        <a href="work.html">
            <img id="would_you" class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" />
            <div class="overlay">
                 <div class="text">WOULD YOU</div>
             </div>
         </a>
   </div>

Answer 1

您的 mouseListener 方法在 mouseover 事件发生时被调用，也就是它创建事件的侦听器时，而不是对事件执行操作。你不需要添加监听器，因为你已经注册了鼠标悬停时调用的函数，你只需要为该事件执行你想要的操作。

您需要将该绑定放在其他地方，或者创建两个绑定到 onmouseover 和 onmouseout 的方法。

例如，如果您想采用两种方法路线（因为这与您当前的代码最相似）：

<div onmouseover="mouseOverListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" onmouseout="mouseOutListener('#would_youDiv','#would_you','images/would_you.gif','images/would_you.jpg');" id="would_youDiv" class="container">
        <a href="work.html">
            <img id="would_you" class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" />
            <div class="overlay">
                 <div class="text">WOULD YOU</div>
             </div>
         </a>
   </div>

然后在你的 Javascript:

function mouseOverListener(imageDiv, image, animated, static) {
    $(image).attr("src", animated);
}

function mouseOutListener(imageDiv, image, animated, static) {
    $(image).attr("src", static);
}

Answer 2

您可以通过使用类和数据元素概括逻辑来使这更容易。

$(document).ready(function() {
  $('.hover-image-container').hover(
    function() {
      //find the image in the container
      var $img = $(this).find('img');
      //set the src to the animaged src on it
      $img.attr('src', $img.data('animated-src'));
    },
    function() {
      //find the image in the container
      var $img = $(this).find('img');
      //set the src to the original src
      $img.attr('src', $img.data('src'));
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container hover-image-container">
  <a href="work.html">
    <img src="images/would_you.jpg" data-src="images/would_you.jpg" data-animated-src="images/would_you.gif" width="100%" height="100%" />
    <div class="overlay">
      <div class="text">WOULD YOU</div>
    </div>
  </a>
</div>

Answer 3

你不需要js函数

HTML

<div class="container">
    <a href="work.html">
        <img class="img-fluid" src="images/would_you.jpg" width="100%" height="100%" onmouseover="this.src='images/would_you.gif'" onmouseout="this.src='images/would_you.jpg'"/>
         <div class="overlay">
             <div class="text">WOULD YOU</div>
        </div>
    </a>
</div>

鼠标悬停功能第一次不起作用

Mouseover function not working for first time

javascript

jquery

html

mouseover