Question

我有5个不同的图像用作锚点。我希望在悬停时替换图像并在整个点击操作中保留该图像。然后保留该新图像，直到单击具有相同类的另一个图像。我不确定如何实现这个功能。守则如下。提前谢谢你们。

HTML

 <img class="year" id="yr60" src="/images/1960-a.jpg" style="height:24px;margin-left:132px;position:relative;top:-150px;width:96px;" /> 
 <img class="year" id="yr70" src="/images/1970-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
 <img class="year" id="yr80" src="/images/1980-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
 <img class="year" id="yr90" src="/images/1990-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
 <img class="year" id="yr20" src="/images/2000-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" />

每个的悬停图片都是src =“/ images / 1960-h.jpg”| src =“/ images / 1970-h.jpg”| src =“/ images / 1980-h.jpg”等。

Answer 1

您可以使用src attr()

在each loop中，您可以更改src

$(document).ready(function(){
 $("img")
        .mouseover(function() { 
            $(this).attr("src", "newSrc");
        });
        .mouseout(function() {
            $(this).attr("src", "OldSrc");
        });});

Answer 2

我只是做了一次大脑练习，所以即使我知道你并没有完全遵守规则，我希望你能从中得到一些帮助。 http://jsfiddle.net/8GPNP/

function replaceold(sel) {
$(sel).each(function() {
    oldvalue = $(this).attr("src").replace("-h", "-a");
    $(this).attr("src", oldvalue);
});
}
$("img").on("mouseenter",function(e) {
   newvalue = $(this).attr("src").replace("-a", "-h");
   $(this).attr("src", newvalue);
});

$("img").on("click",function() {
    $("img").removeClass("selected");
    $(this).addClass("selected");
});

$("img").on("mouseleave",function() {
    //reset all src
    replaceold('img:not(.selected)');
});

Answer 3

你可以用css解决这个问题

img.year:before {
    content: '';
}
img.year:hover, img.year:active, img.year:focus {
    content: '';
}
img#yr60:hover:before, img#yr60:active:before, img#yr60:focus:before {
    content: url("/images/1960-h.jpg");
}
img#yr70:hover:before, img#yr70:active:before, img#yr70:focus:before {
    content: url("/images/1970-h.jpg");
}
img#yr80:hover:before, img#yr80:active:before, img#yr80:focus:before {
    content: url("/images/1980-h.jpg");
}
img#yr90:hover:before...

这样的事情应该有用。

悬停和onClick图像交换

3 个答案: