0

我有一个 div 设置为opacity:0.7. 我想让它在悬停时看起来 100% 不透明，所以我创建了：

.fullopaque {
opacity: 1;
}

("#menu DIV").hover(
  function () {
    $(this).addClass('fullopaque');
  },
  function () {
   $(this).removeClass('fullopaque');
  }
);

我可以在控制台中看到新类已添加到 div 中，但视觉上没有任何变化。

.fullopaque 设置在我的 CSS 中的 divs 样式下方，因此这也不应该是一个问题。

有什么我做错了吗？我似乎无法找出原因。

4

4 回答 4

1

大概你遇到了这种情况

<div class='seventypercent fullyopaque'></div>

所以你有两个类（实际上，两个样式声明 - 稍后会提到）附加到元素上，它们都应该应用它们的规则，但在这种情况下它们会发生冲突。CSS 将使用某种层次结构来计算哪些规则应该优先，在这种情况下，它是 70% 的不透明度。在您的示例中，我想您是其他选择器 is #menu div，它更具体，因此将优先（CSS特异性可能很复杂）

有几种方法可以解决这个问题。首先，哪里需要 jQuery，为什么不干脆做：

#menu div:hover { opacity:1; }

如果做不到这一点，你需要修改你的 CSS 以便你的完全不透明的类优先。你可以这样做：

#menu div.fullopaque { opacity:1; }
于 2013-07-24T23:24:34.903 回答
1

试试下面的：

$("#menu DIV").hover(
  function () {
    $(this).css({ opacity: 1 });
  },
  function () {
   $(this).css({ opacity: 0.7 });
  }
);

这是jsfiddle

于 2013-07-24T23:23:24.480 回答
0 
#menu DIV:hover{
 opacity: 1;
}

如果 css 有效，我不会尝试 javascript

于 2013-07-25T00:20:23.303 回答
0

为什么不将 CSS 更改为：

#menu:hover {
  opacity: 100%;
}
于 2013-07-24T23:27:06.957 回答