jquery - 悬停时不设置不透明度

Question

我有一个基本的下拉菜单。当我将鼠标悬停在不同的菜单选项上时，它应该设置为opacity: 1. 它开始于.5。

这是我的 jQuery 的悬停部分：

$('#cat1 > li > a').hover(function () {
    $(this).css({
        color: '#dc692e', opacity: 1
    });
}, function () {
    $(this).css({
        color: '#fff', opacity: .5
    });
});

这是完整的小提琴：http: //jsfiddle.net/Nilzone/HnmHh/

谢谢你的帮助！

Answer 1

使用$('#cat1 > li > a').hover(...不起作用，因为在该代码运行时a元素实际上还不存在。您需要在附加这些元素后立即运行该代码（在$.getJSON()回调中），或者在最初存在的元素上使用委托事件处理程序：

$('#cat1').on({
    mouseenter : function () {
      $(this).css({
        color: '#dc692e', opacity: 1
      });
    },
    mouseleave : function () {
      $(this).css({
        color: '#fff', opacity: .5
      });
    }
},'li > a');

演示：http: //jsfiddle.net/HnmHh/11/

每次事件发生时都会测试'li > a'作为单独参数传递的选择器，因此处理程序处理动态添加的元素。.on()

如果您为此使用 CSS，则不会出现此问题，因为 CSS 规则将应用于动态添加的元素。

Answer 2

您可以使用动画来更改不透明度。

$('#cat1 > li > a').hover(function () {
    $(this).animate({opacity: 1}, 500);
});