Question

我在实现jquery功能时遇到问题，该功能允许我将鼠标悬停在图像上并更改图像，然后在不悬停时将其恢复为原始图像。这是我到目前为止，任何帮助将不胜感激。

<div id="slideshow">
        <img src="myPic.jpg" width="400" height="300" alt="pic" id="myImage"/>
</div>

$(document).ready(function(){
 $("#myImage").hover(function(){
    $("#myImage").attr("src", "http://timesofoman.com/uploads/images/2017/05/21/671029.JPG");
    },function() {
        $("#myImage").attr("src", "myPic.jpg");
    });
  });
}

Answer 1

如果要在鼠标移出时更改图像，则必须添加mouseout事件。

$("#myImage").hover(function(){
  $(this).attr("src", 
     "http://timesofoman.com/uploads/images/2017/05/21/671029.JPG");
  }).on("mouseout",function(){
  $(this).attr("src", "myPic.jpg");
});

＆＃13;

$("#myImage").hover(function(){
      $(this).attr("src", 
         "http://www.thehindu.com/news/national/other-states/article20605531.ece/alternates/LANDSCAPE_460/20TH-THGRP-RUPANI");
      }).on("mouseout",function(){
      $(this).attr("src", "http://www.thehindu.com/news/national/article20601353.ece/alternates/FREE_460/21THCRPF-02");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="myImage" src="http://www.thehindu.com/news/national/other-states/article20605531.ece/alternates/LANDSCAPE_460/20TH-THGRP-RUPANI" />

＆＃13;

Answer 2

试试这个。

$("#myImage").hover(function(){
  $("#myImage").attr("src", "https://dummyimage.com/200x200/185bd9/ffffff&text=hover+image");
},function() {
  $("#myImage").attr("src", "https://dummyimage.com/200x200/000/fff");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
    <img src="https://dummyimage.com/200x200/000/fff" width="400" height="300" alt="pic" id="myImage"/>
</div>

Answer 3

以下代码可以使用

$(document).ready(function(){
      $("#image").hover(function(){
        $("#image").attr("src","https://img.teleflora.com/images/o_0/l_flowers:t17t100a,pg_6/w_272,h_340,cs_no_cmyk,c_pad,g_south/f_auto,q_auto:eco,e_sharpen:200/flowers/t17t100a/Teleflora'sCountryOvenCenterpiece");
      },function(){
        $("#image").attr("src","https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg">

我唯一能想到的是你的一个链接不起作用或设置不正确。您可能在原始帖子中放置的那个或者额外的“}”在代码块之后有一个。

Answer 4

您可能不想使用硬编码图像src和alt-src。就像在电子商务网站中一样，您将拥有不同的产品图像，因此jQuery部分应该独立于html。以下是我想要推荐的方法（使用自定义属性data-*）

<html>
    <head>
        <title>Image test</title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <image src="http://placeholder.pics/svg/300" class="product" data-alt-src="http://placeholder.pics/svg/300/E494FF"/>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".product").hover(function() {
                    if(!$(this).attr("data-src")) {
                        $(this).attr("data-src", $(this).attr("src"));
                        //console.log($(this).attr("data-src"));
                    }
                    if($(this).attr("data-alt-src")) {
                        $(this).attr("src", $(this).attr("data-alt-src"));
                    }
                }, function() {
                    if($(this).attr("data-src")) {
                        $(this).attr("src", $(this).attr("data-src"));
                    }
                });
            });
        </script>
    </body>
</html>

Answer 5

非常简单的示例简单的onhover更改jquery中的图像： -

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });
});
</script>
</head>
<body>

<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />




</body>
</html>

＆＃13;

.hover（）Jquery需要帮助

5 个答案: