html - 如何将跨度悬停在标签内

Question

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

<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