147

当用户将鼠标悬停在类名为"reMode_hover".

但是如果元素也有，我不想改变颜色"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;
}
4

3 回答 3

266

一种方法是使用多类选择器（没有空格，因为它是后代选择器）：

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}
<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>

于 2013-04-24T20:56:06.517 回答
31

在现代浏览器中，您可以：

.reMode_hover:not(.reMode_selected):hover{}

有关兼容性信息，请参阅http://caniuse.com/css-sel3。

于 2013-04-24T20:56:18.490 回答
12

方法一

您的代码的问题是您选择的.remode_hover是. 所以让你的代码正常工作的第一部分是删除那个空间.remode_selected

.reMode_selected.reMode_hover:hover

然后，为了使样式不起作用，您必须覆盖由:hover. 换句话说，你需要反击background-color财产。所以最终的代码将是

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

小提琴

方法二

:not()如其他人所述，另一种方法是使用。这将返回括号内没有声明的类或属性的任何元素。在这种情况下，你会放在.remode_selected那里。这将针对所有没有类的元素.remode_selected

小提琴

但是，我不推荐这种方法，因为它是在 CSS3 中引入的，所以浏览器支持并不理想。

方法三

第三种方法是使用 jQuery。您可以定位.not()选择器，这类似于:not()在 CSS 中使用，但具有更好的浏览器支持

小提琴

于 2013-04-24T20:58:58.237 回答