Question

我对我网站上的链接有悬停效果。我希望这些适用于每个链接，除了特定div中的链接。

示例HTML

<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'" 
onmouseout="this.src='_images/_menu/Home.png'" 
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>

我一直在试图给我们的CSS

a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*

a:hover:not(#menu) { *no change*

a:hover:not(#menu.menu_item) {  *turns off hover on all links*
a:hover:not(#menu .menu_item) {  *turns off hover on all links*

Answer 1

希望这些适用于每个链接，除了特定div中的链接

CSS中此类问题的标准方法是首先给出一般规则，然后是覆盖它的特定规则。使用:not是一个滑坡，应该保留用于特殊情况。所以：

/* State the general rule first */
a:hover {
    background-color: #D6910E;
    color: #FFE1A7;
}

/* Give the exception */
.menu_item a:hover {
    background-color: transparent;
    color: inherit;
 }

如果您确实想使用:not，则必须了解谓词适用于当前元素：

a:hover:not(#menu)

是否意味着a标记被悬停，而{em} <{1}};这意味着#menu标记悬停，不是自己 a（始终匹配）。要执行您要对#menu执行的操作，您可能需要尝试类似

的操作

:not

但是，这也行不通，因为这意味着“:not(#menu) a:hover标记悬停其中任何祖先不是a”，这也几乎总是匹配

Answer 2

为什么你不容易？

喜欢

a:hover {
  background-color:red;
  color:red;
}

#menu .menu_item:hover{
    /* Default color */
}

在您的情况下，您可以通过更改“悬停”的位置来修复它

a:not(.menu_item):hover {
    background-color: #D6910E;
    color: #FFE1A7;
} /*no change*/

a:not(#menu):hover { /*no change*/ }

a:not(#menu.menu_item) :hover {  /*turns off hover on all links*/

a:not(#menu .menu_item):hover {  /*turns off hover on all links*/

希望它会帮助你

使用方法：不带链接的选择器

2 个答案: