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

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

＆＃13;

$(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'));
    }
  );
});

＆＃13;

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

＆＃13;

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>

鼠标悬停功能首次无法使用

3 个答案: