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

Demo

说明：我们在这里做的是，我们正在选择具有2个类的组合的元素，而不是我们在悬停时使用相同的颜色，这是它们的默认background-color，因此，这是赢得了'取出悬停，它确实悬停，但由于背景颜色相同，你不会看到任何变化。

Answer 2

我建议尽可能避免首先定位元素。

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

jsfiddle 1

CSS

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

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

jsfiddle 2

CSS

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

CSS通过覆盖类来取消属性

2 个答案:

CSS

CSS