0

我有一个 a 标签，a 标签内是一个跨度，带有一个名为“箭头”的类。我在 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;
}
4

5 回答 5

2

基于此：

<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

于 2013-11-04T12:04:41.743 回答
0

要选择当前项目旁边的内容，请使用+

#results .link a:hover+.arrow

这应该这样做。

于 2013-11-04T09:51:45.000 回答
0 
#results .link a:hover span{
   /* your style */
}

这是你想要的吗？

于 2013-11-04T09:51:57.710 回答
0

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

于 2013-11-04T09:52:20.993 回答
0

也许这可以解决问题：

#results .link a:hover .arrow {
  background-color: red; }
于 2013-11-04T09:53:18.977 回答