我有以下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/

最佳答案

这确实是一个好问题,因为没有比这更简单的方法了,您可以查看我的解决方案

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,因此总之,这不会消除悬停。 ,它的确会悬停,但是由于背景颜色相同,您不会看到任何变化。

10-05 20:35
查看更多