-1

我有 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" 等

4

3 回答 3

1

您可以使用 src attr()

在each loop你可以改变src 

$(document).ready(function(){
 $("img")
        .mouseover(function() { 
            $(this).attr("src", "newSrc");
        });
        .mouseout(function() {
            $(this).attr("src", "OldSrc");
        });});
于 2013-07-02T16:30:11.703 回答
1

我只是把它作为一种大脑锻炼来做，所以即使我知道你没有完全遵守规则，我希望你能从中得到一些用处。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)');
});
于 2013-07-02T16:49:02.533 回答
0

你可以用 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...

类似的东西应该工作。

于 2013-07-02T17:06:36.760 回答