0

我正在尝试通过将鼠标悬停在我的 div 中的图像来更改它，以便将其更改为不同的图像。但是，当我将鼠标悬停时，我无法插入第二张图像，并且当我离开鼠标时，我无法将第一张图像带回。

HTML 

<head>
    <link rel="stylesheet" href="TEST.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('img').mouseenter(function(){
                $(this).remove();
                $(this).css("background-image",       "url(http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png)");
            });
            $('img').mouseleave(function(){

            });
        });
    </script>
</head>

<body>

    <div>
        <img src="http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png"/>
    </div>

</body>

4

5 回答 5

3

演示

有这个：

<img class="hoverable" src="image.png"/>

您可以使用：

jQuery(function( $ ){ // DOM Ready shorthand

    var orgSrc;
    $('.hoverable').hover(function(){      
      orgSrc = this.src;      
      this.src = "image2.png";
    }, function(){
      this.src = orgSrc;    
    });

});

使用data-*属性：DEMO

$('.hoverable').hover(function(){      
  $(this).data('src', this.src);      
  this.src = "image2.png";
}, function(){
  this.src = $(this).data('src');   
});

在使用方法之前，请务必仔细查看jQuery API 文档，对方法和选择器名称保持友好。另外，我建议您打印一份jQuery 备忘单，将一张放在办公桌附近总是好的 :)

于 2013-08-26T06:09:06.590 回答
1

You can also do this by CSS only:

div:after{
  content: url('http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png');
}

div:hover:after{
  content: url('http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png');
}

Demo http://codepen.io/anon/pen/ijeEq

于 2013-08-26T06:14:21.220 回答
0

您不能将“背景”属性应用于图像本身，因此您的代码将无法正常工作（据我所知）。如我所见，您将图像包装在一个 div 中，因此您可以像这样更改它：

$('div img').mouseenter(function()
{
$(this).attr('src','source_of_new_image');
}).mouseleave(function()
{
$(this).attr('src','source_of_old_image');
});
于 2013-08-26T06:20:32.547 回答
0

$.remove从字面上删除页面中的元素（不删除样式）。如果删除它，则可以添加背景图像。然后只需将其设置为空字符串即可将其删除。

代码笔

$(document).ready(function(){
  $('img').mouseenter(function(){
    $(this).css("background-image",       "url(http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png)");
  });
  $('img').mouseleave(function(){
    $(this).css("background-image", "");
  });
});
于 2013-08-26T06:04:49.450 回答
-2 
    $(document).ready(function(){
      $(".hoverable").hover(
      function () {
         $(this).attr("src","http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png");
      },
      function () {
         $(this).attr("src","http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png");
      }
    );
    });
于 2013-08-26T06:10:08.000 回答