ansaurus

Question

CSS on anchor tags

Answer 1

+6 A:

.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.

David Dorward 2010-10-01 15:45:34

Ooooh, nice! What browsers does/doesn't this work in?

Pekka 2010-10-01 15:46:39

Older versions of IE. I **think** support for the adjacent sibling selector was added in IE7, but I wouldn't swear to it.

David Dorward 2010-10-01 15:48:30

I can't use this technique because it means that both links end up pointing to the same place. On my page, I have 2 links per row, 1 link is to add something to the database, and the other link is to remove something from the database, both for the same item related to the row the link pairs are on.

oshirowanen 2010-10-04 09:43:08

I provided two techniques, the first one will still work for your use case, but I'll also refer you to back the last paragraph of my answer … and also point out that links should not perform non-idempotent (otherwise you'll have a bot or a pre-caching proxy or browser run all over your database and delete everything)

David Dorward 2010-10-04 09:44:28

I've tried the first example, but it does not work. So i have updated the end of the original question to show what works a little better, but not working perfectly.

oshirowanen 2010-10-04 09:55:59

The original question is showing no sign of edits, but my tests work as expected: http://dorward.me.uk/tmp/plus.html

David Dorward 2010-10-04 10:15:30

Answer 2

A:

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

kchau 2010-10-01 15:45:58

Surely that wouldn't work? It'd turn either one of them red, when you hover over that one individually.

chigley 2010-10-01 15:47:54

@chigley, Good call. My bad.

kchau 2010-10-01 15:48:54

Answer 3

+1 A:

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.

Stephen P 2010-10-01 16:08:05

ansaurus

tags:

views:

answers:

CSS on anchor tags

related questions