wordpress用户数据同步/seo推广软件代理

当用户鼠标将鼠标悬停在类名称为"reMode_hover"的元素上时，我尝试应用背景色。

但是如果元素也有"reMode_selected"，我不想更改颜色

注意：因为我在某种有限的环境中工作，所以只能使用CSS而不是JavaScript。

为了澄清，我的目标是为悬停时的第一个元素着色，而不是第二个元素。

的HTML

Design

class="reMode_design  reMode_hover reMode_selected">

Design

我在下面尝试过，希望第一个定义有效，但事实并非如此。 我究竟做错了什么？

的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;

}

http://jsfiddle.net/geatR/

另一个可能是使用:not()选择器

.reMode_hover:not(.reMode_selected):hover

{

background-color: #f0ac00;

}

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

不应该是：.reMode_hover：not(.reMode_selected)：hover以我的经验，这些引号是必需的。

@MakanTayebi关于选择器周围的引号，您提出了一个很好的观点。 TL; DR：确实最好使用它们。 在stackoverflow.com/a/5578880/1772379上进行了详尽的解释。

在现代浏览器中，您可以执行以下操作：

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

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

方法1

代码的问题在于，您选择的是.remode_selected的后代.remode_hover。因此，使代码正常工作的第一步是删除该空间

.reMode_selected.reMode_hover:hover

然后，为了使样式不起作用，必须覆盖:hover设置的样式。换句话说，您需要抵抗background-color属性。所以最终的代码将是

.reMode_selected.reMode_hover:hover {

background-color:inherit;

}

.reMode_hover:hover {

background-color: #f0ac00;

}

小提琴

方法2

如其他人所述，一种替代方法是使用:not()。这将返回括号中没有任何类或属性的任何元素。在这种情况下，您将在其中放置.remode_selected。这将定位所有没有.remode_selected类的元素

小提琴

但是，由于CSS3中引入了此方法，因此我不推荐使用此方法，因此对浏览器的支持并不理想。

方法3

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

小提琴

您应该删除提及jQuery的"方法3"，因为OP专门针对解决方案说"不是javascript"。