Question

我有一个设为opacity:0.7的div。我想让它在悬停时显得100％不透明，所以我创建了：

.fullopaque {
opacity: 1;
}

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

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

.fullopaque设置在我的CSS中的divs样式下面，所以也不应该是一个问题。

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

Answer 1

尝试以下方法：

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

这是jsfiddle

Answer 2

据推测，你正在遇到这种情况

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

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

有几种方法可以解决这个问题。首先，需要jQuery的地方，为什么不简单地做：

#menu div:hover { opacity:1; }

如果失败了，你需要修改你的CSS，这样你的完全不透明的类优先。你可以这样做：

#menu div.fullopaque { opacity:1; }

Answer 3

为什么不将CSS更改为：

#menu:hover {
  opacity: 100%;
}

Answer 4

#menu DIV:hover{
 opacity: 1;
}

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

Jquery：悬停时不透明度的变化不起作用

4 个答案: