锚标签上的CSS

osh*_*nen 1 css

如果我有以下内容:

<div class="linkSet"><a href="#" class="main_link">link one a</a><a href="#" class="sub_link">link one b</a></div>
Run Code Online (Sandbox Code Playgroud)

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

Que*_*tin 7

.main_link:hover,
.main_link:hover + .sub_link {
    background-color: red;
}
Run Code Online (Sandbox Code Playgroud)

但是以下内容:

<a>
    <span class="main">...</span>
    <span class="sub">...</span>
</a>
Run Code Online (Sandbox Code Playgroud)

会给你:

  • 更好的结构(两个链接到同一个地方通常很差,因为有很多交互(标签,屏幕阅读器等),它们被视为单独的链接,即使你设置它们,所以他们不这样做)
  • 更好的支持(MSIE的旧版本不支持+)
  • 当第二个链接悬停时,第一个链接会改变颜色(+仅适用于下一个链接,之前没有).

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