我有这些图标集,
<div class="nav">
<a href="/ask" title="Ask Question"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img class="icon1" id="icon"
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div>
当悬停时,我希望它们褪色到较低的不透明度。我不想使用 Javascript 调用图像...这够简单吗?
最佳答案
您需要修复该 HTML 以使用 class
属性。不能有多个元素具有相同的 id
属性。
<div class="nav">
<a href="/ask" title="Ask Question"><img class="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img id="icon1" class="icon"
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img class="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div>
然后,使用这个 jQuery:
$('img.icon').hover(
function() {
console.log('hello');
$(this).stop().animate({ opacity: 0.5 });
},
function() {
$(this).stop().animate({ opacity: 1.0 });
}
);
这会在鼠标进入时将图标设置为 50% 不透明度,并在鼠标离开时恢复为 100%。
关于jquery - 我如何使用 jQuery 将图标淡化为较低的不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5373647/