悬停时jQuery交换图像，然后在悬停时将其替换为原始图像

Question

I am using the following code to swap an image src out on hover of the child's parent. How can I save the original source in a variable and on hover off return the image to its original source?

      $("#parent span").hover(function(){
          var currentImage = $('img', this ).attr("src","images/orbs/yellowBar.png");
          $('img', this ).attr("src","images/yellowBar.png");


        },function(){

          $('img', this ).attr("src",currentImage);

      });

Answer 1

Define currentImage outside of your function:

var currentImage;

$("#parent span").hover(function() {
    currentImage = $('img', this).attr("src", "images/orbs/yellowBar.png");
    $('img', this).attr("src", "images/yellowBar.png");
}, function() {
    $('img', this).attr("src", currentImage);
});

Answer 2

As for me, the better way is to create two css classes with different background image and don't use javascript/jquery for image switch on hover at all.

css:

.time-stamp-img {
    background:url('images/time_stamp_list_icon_play.png');
}
.time-stamp-img:hover {
    background:url('images/time_stamp_list_icon_hover.png');
}

html:

<div class="time-stamp-img"></div>

Answer 3

我使用https://api.jquery.com/data/并在原始源的元素上设置数据点，然后在鼠标输出时检索它。

Answer 4

Building on Dylan Watt's suggestion I'd use .data() to avoid a global variable.

So something like this:

$("span").mouseenter(function () {
    var currentImage = $('img', this).attr("src");
    $('img', this).data("orig", currentImage)
    .attr("src", "http://placehold.it/350x150&text=hover");
}).mouseleave(function () {
    var original = $('img', this).data("orig");
    $('img', this).attr("src", original);
});

And here's the fiddle that's from that you can adapt for your use:

http://jsfiddle.net/djfe7rum/1/

Answer 5

I would suggest using mouseenter, mouseleave, as such:

var currentImage;
$("#parent span").mouseenter(function(){
    currentImage = $('img', this ).attr("src");
    $('img', this ).attr("src","images/yellowBar.png");
}).mouseleave(function(){
    $('img', this ).attr("src", currentImage);
});

If this doesn't work, please provide your HTML code.