Html 从 a：hover 中排除  标记下的类

发布于08月13日

我有可选的框(class="selectbox")，它们有自己的悬停行为，所以这些框中的任何链接文本都应该从一般的a:hover 效果中排除.我try 使用So上其他答案中建议的:not() css伪类，但无法正常工作.

<!-- Link within box, should not have hover effect -->
<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

我try 过的css:

a:not(.selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}

a:not(a > .selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}

推荐答案

:not在这里是行不通的，因为你想知道它是否包含某些元素.你可以像下面这样使用:has，但浏览器的支持并不是最好的.

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a:has(.selectbox):hover{
  text-shadow: none;
}

<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

或者对锚点内的内容使用较高specificity的 Select 符，如下所示:

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a > .selectbox {
    text-shadow: none;
}

<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>