嗨,我有这段 html...
<a href="alcohol_calculator.php" class="swfselector">
» Alcohol unit calculator prototype
<img class="tab" src="/images/1.png" width="30" height="28" alt="1" />
<img class="tab" src="/images/2.png" width="30" height="28" alt="2" />
<img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
<img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="bouncing_ball.php" class="swfselector">
» Bouncing ball animation
<img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>
使用 Jquery 我希望这样当有人将鼠标悬停在“swfselector”类上时,带有类选项卡的所有子图像都会在其 src 中添加“o”...例如(/images/2o.png 或/图片/3.png/)。
到目前为止我已经有了这个,但它什么也没做,而且无论如何都会在“.png”后面添加“o”。
$('.swfselector').each.hover(function(){
$(this).find('.tab').attr('src'+'o');
});
感谢帮助。
最佳答案
这对你有用
var done1 = 0;
$('a.swfselector1').live('hover', function() {
if(done2 != 1){
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
done1 = 1;
})
}
});
var done2 = 0;
$('a.swfselector2').live('hover', function() {
if(done2 != 1){
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
done2 = 1;
})
}
});
不幸的是,我发现执行此操作的最简单方法是更改具有悬停功能的多个 a
标记的 a
标记的类名称。基本上是在 swfselector 的末尾添加一个数字。然后快速创建一个新的 jQuery 事件。
如果我还没有说得足够清楚,请看一下 this jsFiddle 会更容易理解。
最终结果(与乔治联合团队合作):
$('.swfselector').live('mouseover mouseout', function() {
if (event.type == 'mouseover') {
$(this).find('.tab').each(function() {
$(this).attr("src", $(this).attr("src").replace(".png", "o.png"));
})
} //end of if
else {
$(this).find('.tab').each(function() {
$(this).attr("src", $(this).attr("src").replace("o.png", ".png"));
})
}//end of else
});//end of mouseover/mouseout
关于Jquery:在父级悬停时更改子图像 href 源的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5742523/