Question

我试图通过鼠标移动来更改我的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>

Answer 1

<强> DEMO

有这个：

<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 Docs，熟悉方法和选择器名称。另外我建议你打印一个jQuery Cheat Sheet，把一张靠近你的办公桌总是好的。）

Answer 2

您也可以仅通过CSS执行此操作：

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

演示 http://codepen.io/anon/pen/ijeEq

Answer 3

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

CodePen

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

Answer 4

你不能将“背景”属性应用于图像本身，所以从字面上看，你的代码不起作用（据我所知）。正如我所看到的，你将图像包装在一个div中，所以你可以改变它：

$('div img').mouseenter(function()
{
$(this).attr('src','source_of_new_image');
}).mouseleave(function()
{
$(this).attr('src','source_of_old_image');
});

Answer 5

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

用jquery改变图像背景

5 个答案: