我有一个名为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>
谢谢.
1条答案
按热度按时间dgjrabp21#
你必须在一个组合中使用
:not()
和:has()
css函数来获得所需的结果。示例如下: