css 应用悬停样式只对元素,我是directlty悬停

a64a0gku  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(117)

我有一个名为h-me的类的多个元素。标记看起来有点像这样:

<span class="h-me">
  <span class="h-me">
    <span class="h-me">
    x
    </span>
    <span class="h-me">
    y
    </span>
  </span>
</span>

CSS看起来像这样:

.h-me:hover {
  background: rgba(0, 0, 0, 0.1);  
}

当我将鼠标悬停在内容为“x”的span标签上时,它会改变所有span元素的背景,因为我实际上是将鼠标悬停在所有这些元素上。
有没有办法只改变我严格悬停在上面的元素的背景?
这里有两个限制。
1.我不能以任何方式改变标记。我将不得不依靠一些CSS或JavaScript技巧来完成它。
1.价格不会一直固定。它会经常变化。
标记通常如下所示:

<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1em; vertical-align: -0.25em;"></span><span style="margin-right: 0.1076em;" class="h-me mathnormal">f</span><span class="mopen">(</span><span class="h-me mathnormal">x</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 2.3846em; vertical-align: -0.9703em;"></span><span class="mop"><span style="margin-right: 0.4445em; position: relative; top: -0.0011em;" class="mop op-symbol large-op">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.4143em;"><span class="" style="top: -1.7881em; margin-left: -0.4445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight"><span class="h-me mtight">−</span><span class="h-me mtight">∞</span></span></span></span><span class="" style="top: -3.8129em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight">∞</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.9703em;"><span class=""></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.9579em;"><span class="" style="top: -3em;"><span class="pstrut" style="height: 3em;"></span><span style="margin-right: 0.1076em;" class="h-me mathnormal">f</span></span><span class="" style="top: -3.2634em;"><span class="pstrut" style="height: 3em;"></span><span class="accent-body" style="left: -0.0833em;"><span class="h-me">^</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.1944em;"><span class=""></span></span></span></span></span><span class="mopen">(</span><span style="margin-right: 0.046em;" class="h-me mathnormal">ξ</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me"><span class="h-me mathnormal">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8991em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight"><span class="h-me mtight">2</span><span class="h-me mathnormal mtight">πi</span><span style="margin-right: 0.046em;" class="h-me mathnormal mtight">ξ</span><span class="h-me mathnormal mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me mathnormal">d</span><span style="margin-right: 0.046em;" class="h-me mathnormal">ξ</span></span></span>

谢谢.

dgjrabp2

dgjrabp21#

你必须在一个组合中使用:not():has() css函数来获得所需的结果。示例如下:

.h-me:not(:has(.h-me)):hover {
  background: rgba(0, 0, 0, 0.1);
}
<span class="h-me">
  <span class="h-me">
    <span class="h-me">
      x
    </span>
    <span class="h-me">
      y
    </span>
  </span>
</span>

相关问题