css - CSS通过覆盖类取消属性

Question

我有以下html：

    <div class="red placeholder"></div>
    <div class="blue placeholder"></div>
    <div class="green placeholder"></div>

和 CSS：

 .placeholder {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid black;
}
.placeholder:hover {
    background-color: gray;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}

我不应该更改初始占位符声明，也不希望 DIV 在悬停时更改颜色。有什么方法可以覆盖占位符类以“取消”或关闭该悬停属性？

jsFiddle：http: //jsfiddle.net/8QJEq/4/

Answer 1

这真是一个好问题，因为我无法找到比这更简单的方法，您可以查看我的解决方案

div[class="red placeholder"]:hover {
    background-color: red;
}

div[class="blue placeholder"]:hover {
    background-color: blue;
}

div[class="green placeholder"]:hover {
    background-color: green;
}

演示

说明：我们在这里所做的是，我们正在选择具有 2 个类组合的元素，并且我们在悬停时使用相同的颜色，这是它们的默认颜色background-color，所以简而言之，这不会取消悬停，它确实悬停，但由于相同的背景颜色，您不会看到任何变化。

Answer 2

如果可能的话，我建议首先避免定位元素。

如果那不可能，您可以只用每种颜色声明悬停状态。只要在.color:hover之后声明.placeholder:hover它就会覆盖它，因为它们具有相同的特异性。

jsfiddle 1

CSS

.color, .color:hover { background-color: color; }

---

虽然我不推荐它，但听起来您不希望具有颜色类的 div 不更改background-color，您也可以将规则声明为!important. 但这只是最后的选择，因为您将无法轻松地background-color再次覆盖。

jsfiddle 2

CSS

.color { background-color: color !important; }