Jquery 切换悬停不透明度

如何在

mouseout

上恢复悬停不透明度效果？我可以让我的悬停效果毫无问题地发生，但我似乎无法撤销它的效果

JSFiddle：

---

我肯定希望在JQuery中实现这一效果，而不是在纯CSS中，因为我需要在之后添加额外的功能（文本覆盖）。

使用mouseleave回调，这是hover（）的第二个参数

$（“.list组项”）.hover（函数（）{
$（this）.stop（）.animate({
“不透明度”：“0.5”
});
}，函数（）{
$（this）.stop（）.animate({
“不透明度”：1
});
});
您可以使用hover

的第二个参数。这将在元素的

mouseout

时运行

$(".list-group-item").hover(function() {
    $(this).stop().animate({
        "opacity": "0.5"
    });
}, function() {
    $(this).stop().animate({
        "opacity": "1"
    });
});

演示：

我建议您使用

css

而不是

jQuery

：

.list-group-item:hover {
    opacity: .5;
}

演示：

$(".list-group-item").hover(function() {
    $(this).stop().animate({
        "opacity": "0.5"
    });
}, function() {
    $(this).stop().animate({
        "opacity": "1"
    });
});

.list-group-item:hover {
    opacity: .5;
}