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