锚标签上的CSS

Question

如果我有以下内容：

<div class="linkSet"><a href="#" class="main_link">link one a</a><a href="#" class="sub_link">link one b</a></div>

如何设置CSS，如果我将鼠标悬停在第一个上，它会更改两个锚标记的背景颜色？

Answer 1

.main_link:hover,
.main_link:hover + .sub_link {
    background-color: red;
}

但是以下内容：

<a>
    <span class="main">...</span>
    <span class="sub">...</span>
</a>

会给你：

• 更好的结构（两个链接到同一个地方通常是不好的形式，因为有很多交互（标签，屏幕阅读器等），它们被视为单独的链接，即使你设置它们，所以他们不这样做）< / LI>
• 更好的支持（MSIE的旧版本不支持+）
• 当第二个链接悬停时，第一个链接会改变颜色（+仅适用于下一个，没有上一个）。

如果链接转到不同的地方那么这不是真的，但是让它们彼此相邻，并且当它们一个悬停时它们都具有悬停效果真的是用户敌对，因为它强烈暗示它们这样做。

Answer 2

如果你有

<a href="first.html">Link Part A</a> <a href="second.html">Part B</a>

这个CSS将突出显示“链接部分A”悬停时的情况，以及“部分B”悬停时的第二个。

a:hover, a:hover + a {
    background-color: #fff0f0;
}

基本上与David相同，但没有使用类 - 相邻兄弟选择器的旧IE支持存在相同的问题。

Answer 3

a.main_link:hover, a.sub_link:hover {
    background-color: red;
}