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);
});

悬停时不会设置不透明度

2 个答案: