在悬停时替换图像

Question

我正在尝试用另一张图片替换图像。

由于我正在构建的网页必须在IE8中可见，因此基于CSS的解决方案显得非常棒。

我试过了

• display：none;和显示：块;特技
• 不透明度：0;和不透明度：1;特技

但它们都没有按照我想要的方式运行（以div为中心，因为IE8以不同的方式播放一些东西，然后我认为这可能是一个简单的src =“”交换就可以了。

我从jquery开始，但由于我对理解$（this）和DOM非常不好，所以它根本不起作用，但我认为我的逻辑是正确的。

所以，HTML就在这里：

<div class="wrapper">
<a href="#">
    <img class="original" src="http://placekitten.com/200/200">
    <img class="overlay" src="http://placekitten.com/g/200/200">
</a>
…
…

所以我在包装器中有很多标签，每个包含两个图像。由于它们具有响应性且具有相同的比例，因此不需要任何尺寸。

我的开始jquery：

$('.wrapper a').hover(

function () {

    var original = $(this).attr('src');    
    var overlay = $(this).next().attr('src');

    $(this).children('.original').attr('src', overlay);
}, 
function () {

    $(this).children('.original').attr('src', original);
}
);

这是JSFiddle。

所以，我真的在这之后，我在包装器中的每个标签都会根据该标签内的图像改变图像。

Answer 1

你根本不需要javascript。真。使用CSS：

.wrapper a:hover .original {
    display: none;
}
.wrapper a:hover .overlay {
    display: inline-block;
}

演示：http://jsfiddle.net/hHyh6/10/

Answer 2

您只需在悬停时显示overlay图片并隐藏original图片

$('.wrapper a').hover(function () {
    $(this).find('.original').toggle();
    $(this).find('.overlay').toggle();
}, function () {
    $(this).find('.original').toggle();
    $(this).find('.overlay').toggle();
});

DEMO

Answer 3

相反，你可以试试这个：

$('.overlay').hide();  //<----------first hide the overlay image
$('.wrapper a').hover(function () {
   $(this).find('.overlay').show().add(this).find('.original').hide();
   // here find the overlay and show it and hide the original
}, function () {
   $(this).find('.overlay').hide().add(this).find('.original').show();
   // here find the overlay and hide it and show the original
});

Demo @ Fiddle using .end()

Demo @ Fiddle using .add(this)

Answer 4

尝试这个js我也试过你的小提琴它也有效

var current_cash;
$('.wrapper a').hover(

function () {

    current_cash = $(this).find('.original').attr('src');    
    var overlay = $(this).find('.overlay').attr('src');

    $(this).children('.original').attr('src', overlay);
}, 
function () {

    $(this).children('.original').attr('src', current_cash);
}
);