Question

我有一个标签，在标签内是一个带有“箭头”类的跨度。我在标签上有一个悬停样式，将文本变为蓝色。当标签悬停在上方时，我也希望箭头变蓝。

<div id="results" class="center">
    <div class='link'>
        <a href="#">How to use SimplyBuilt support</a>
        <span class="arrow"></span>
    </div>
</div>

我尝试了这个但是没有用。

// This works
#results .link a:hover {
    color: #0098ff;
}

//This does not
#results .link .arrow a:hover {
    background-color: red;
}

Answer 1

基于此：

<div id="results" class="center">
    <div class='link'>
        <a href="#">How to use SimplyBuilt support</a>
        <span class="arrow"></span> <!-- this span is NOT inside the a.href -->
    </div>
</div>

您需要定位.link a:hover + .arrow

但是，如果span实际上是在链接内部，则HTML将是

<div id="results" class="center">
    <div class='link'>
        <a href="#">How to use SimplyBuilt support
        <span class="arrow"></span> <!-- this span IS inside the a.href -->
        </a>
    </div>
</div>

您将定位.link a:hover .arrow

Answer 2

要选择与当前项目并排的内容，请使用+

#results .link a:hover+.arrow

这应该这样做。

Answer 3

#results .link a:hover span{
   /* your style */
}

这是你想要的吗？

Answer 4

a:hover不应该在.arrow之前吗？

Answer 5

也许这就是诀窍：

#results .link a:hover .arrow {
  background-color: red; }

如何将标签悬停在标签内

5 个答案: