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

Question

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

这是我的 jQuery 的悬停部分:

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

这是完整的 fiddle :http://jsfiddle.net/Nilzone/HnmHh/

感谢您的帮助!

Answer 1

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

$('#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 规则将应用于动态添加的元素。