Question

我的css：

.pic img:hover {
  border: 1px black solid;
}

我的HTML：

<div class="pic">
  <img src="hey.jpg">
  <img class="overlay" src="overlay.jpg">
</div>

我有一个＆＃34; overlay.jpg＆＃34;它位于第一张图像的底角。问题在于，叠加层也会获得：悬停效果。

实际的代码非常复杂，我知道最好的解决方案是在第一个图像中添加一个类并仅将其悬停，但这需要的时间比我目前修复的时间要多。

代码有一个覆盖图像的类，所以我想问一下是否可以通过为覆盖类设置其他css来覆盖悬停。

然而.overlay:hover { border: none; }不能解决问题，即使我把它放在上面的CSS之后。

Answer 1

您的规则不如前一个特定，因此会被覆盖。

您必须将其更改为：

.pic .overlay:hover { border: none; }

概念

特异性是浏览器决定哪种方式的手段   属性值与元素最相关并且可以成为   应用。特异性仅基于匹配规则   由不同种类的选择者组成。

如何计算？

特异性计算在   每个选择器类型的计数的连接。这不是重量   应用于相应的匹配表达式。

在特异性平等的情况下，发现最新的声明   CSS应用于元素。

参考：Specificity

Answer 2

只要叠加始终位于第一张图片之后，您就可以使用:first-child仅选择第一张图片：

.pic img:first-child:hover {
  border: 1px black solid;
}

它是supported in everything（不包括IE6，但我不认为这是一件事。）

Answer 3

您还可以使用:not选择器：

.pic img:not(.overlay):hover {
  border: 1px black solid;
}

这样您就不必担心图像的顺序，也不必担心包含其他重置样式的特殊性。

覆盖以前设置的CSS

3 个答案: