我想在用户鼠标悬停其类名为"reMode_hover"的元素时应用背景色。如何在CSS选择器中排除特定的类名？

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

来源

2013-04-24 masato-san

145

一种方法是使用多级选择（没有空间，因为这是后代选择器）：

.reMode_selected.reMode_hover:hover 
{ 
    background-color: transparent; 
}

http://jsfiddle.net/geatR/

另一个办法是使用:not()选择器

.reMode_hover:not(.reMode_selected):hover 
{ 
    background-color: #f0ac00; 
}

http://jsfiddle.net/geatR/1/

来源

2013-04-24 20:56:06

谢谢！在我看到你的答案之前，几乎问到同样的问题。 – RachelC 2013-05-17 15:50:09

不应该是：.reMode_hover：not（'.reMode_selected'）：hover 根据我的经验，这些引号是必要的。 – 2014-12-16 07:57:30

感谢您的时间 – 2015-01-15 14:15:13

在现代浏览器中，你可以这样做：

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

有关兼容性的信息请咨询http://caniuse.com/css-sel3。

来源

2013-04-24 20:56:18 imsky

方法1

与您的代码的问题是，你选择.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; 
}

Fiddle

方法2

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

Fiddle

不过，我不会推荐这种方法，因为它是在CSS3推出，所以浏览器的支持是不理想的事实的所有元素。

方法3

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

Fiddle

来源

2013-04-24 20:58:58

您应该删除提到jQuery的“方法3”，因为OP专门为解决方案表示“不是JavaScript”。 – ScottS 2013-04-25 12:52:18

如何在CSS选择器中排除特定的类名？

回答

方法1

方法2

方法3

相关问题