当用户将鼠标悬停在类名称为的元素上时,我尝试应用background-color "reMode_hover"。
"reMode_hover"
但是如果元素 也 有颜色,我不想更改颜色"reMode_selected"
"reMode_selected"
注意:因为我在某种有限的环境中工作,所以只能使用CSS而不是JavaScript。
为了澄清,我的目标是为悬停时的第一个元素着色,而不是第二个元素。
的HTML
<a href="" title="Design" class="reMode_design reMode_hover"> <span>Design</span> </a> <a href="" title="Design" class="reMode_design reMode_hover reMode_selected"> <span>Design</span> </a>
我在下面尝试过,希望第一个定义有效,但事实并非如此。我究竟做错了什么?
的CSS
/* do not apply background-color so leave this empty */ .reMode_selected .reMode_hover:hover { } .reMode_hover:hover { background-color: #f0ac00; }
一种方法是使用多类选择器(没有空间,因为它是后代选择器):
.reMode_selected.reMode_hover:hover { background-color: transparent; }
另一个可能是使用:not()选择器
:not()
.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }