CSS on anchor tags

If i have the following:

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

How do I set the CSS so if I hover over the first one, it 开发者_如何学运维changes the background colour for both anchor tags?

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

However the following:

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

Will give you:

• Better structure (two links going to the same place is generally poor form as there are many interactions (tabbing, screen readers, etc) where they are treated as separate links, even if you style them so they don't)
• Better support (Slightly old versions of MSIE don't support +)
• Having the first link change colour when the second link is hovered (+ only works for next, there is no previous).

If the links go to different places then this isn't true, but having them right next to each other, and having them both have a hover effect when one is hovered is really user hostile as it strongly suggests that they do.

If you have

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

This CSS will highlight both when "Link Part A" is hovered, and only the second when "Part B" is hovered.

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

Essentially the same as David's but without using classes - there are the same issues with older IE support of the adjacent sibling selector.

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