Question

我有这些图标，

<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调用图像......这很容易吗？

Answer 1

您需要修复该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％。

jsFiddle

Answer 2

首先，您不能拥有相同id的多个元素，因此id="icon"应该成为class="icon"，然后您可以使用jQuery添加这些悬停函数：

$('.icon').hover(function() {
    $(this).fadeTo(500, .3);
}, function() {
    $(this).fadeTo(300, 1);
});

fadeTo()中的第一个数字是持续时间，第二个数字是不透明度，分别是悬停和撤消。

Answer 3

试试这个：

$(function(){
    $('.icon').hover(function(){
        $(this).stop().fadeTo("slow", 0.4);
    }, function(){
        $(this).stop().fadeTo("slow", 1);
    });
});

Answer 4

根据您的浏览器支持需求，您可以使用CSS3 opacity，并使用：hover选择器。不需要jQuery，在现代浏览器中工作得很好（Gecko，Webkit，Opera ......也许IE9，但我无法测试）。

像这样添加CSS：

img:hover{opacity:0.50;}

如何使用jQuery将图标淡化为较低的不透明度？

4 个答案: