Question

我一直试图在悬停时更改图像。但这是一些如何不工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
		$(".card .image-container").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
});
)};
</script>

<div class="card col-xs-2" style="margin-top:33%;padding:0 2% 2% 2%">
  <img 
   src="img/2013-1.png" 
   data-src="img/2013-1.png" 
   data-hover="img/2013-2.png" 
   class="image-container" 
   alt="" 
   style="max-width: 100%;max-height: 100%;width: 100%;height: 100%"
   />

Answer 1

mouseover您无需使用hover。像这样：

＆＃13;

$(function() {
    $(".card img").hover(function(){
      var hoverImg = $(this).data("hover");
      $(this).attr('src', hoverImg);
      }, function(){
      $(this).attr('src', $(this).data("mysrc"));
  });   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card col-xs-2" style="margin-top:15%;padding:0 2% 2% 2%">
  <img src="https://placebear.com/300/300" data-mysrc="https://placebear.com/300/300" data-hover="http://via.placeholder.com/350x150" class="image-container" alt="" style="max-width: 100%;max-height: 100%;width: 100%;height: 100%"/>
</div>

＆＃13;

Answer 2

这是错字看看你的代码关闭。它应该是})而不是)}

Answer 3

用逗号分隔类名。在jquery多选择器中，您需要在类名之间使用逗号。

$（＆＃34; .card，.image-container＆＃34;）

Answer 4

试试这个

我在这里使用了两个谷歌图片，您可以用自己的

替换它

＆＃13;

$(document).ready(function() {
  $(".card .image-container").mouseover(function() {
    $(this).data('src', $(this).prop("src")).attr('src', $(this).data("hover"));
  }).mouseout(function() {
    $(this).attr('src', $(this).data("src"));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card col-xs-2" style="margin-top:33%;padding:0 2% 2% 2%">
  <img src="http://1.bp.blogspot.com/-5bPNsF5plzw/VnJWs-7RbrI/AAAAAAAARmA/DaZmn8YUjAk/s1600-r/logo_research_at_google_color_1x_web_512dp.png" data-hover="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" class="image-container"
    alt="" />
</div>

＆＃13;

Answer 5

在关闭你的功能时稍微混淆一下。因此语法错误。

这是正确的代码。

<script type="text/javascript">
    $(document).ready(function() {
        $(".card .image-container").mouseover(function () {
            $(this).attr('src', $(this).data("hover"));
        }).mouseout(function () {
            $(this).attr('src', $(this).data("src"));
        });
    });
</script>

在悬停时更改图像，但它无法正常工作

5 个答案: