CSS selector a:link:hover

Question

I'm trying to create my website so you can tell where you are just by the colour of the elements in each div. The website is only one page and I'm using jQuery to slide out sections of the website when you click to open that section (As opposed to having seperate .html's).

To show them which section they have open I'm making all links in each section the same colour as the text that opens that section. However I also want to have<a> </a> tags which aren't links to add a bit of colour to the site and to attract viewers to key bits of information. For this reason I want to only apply link effects to <a> </a> tags which are actually links... So I've tried this:

#box1 a{
    color: #68cff2;
}

#box1 a:link:hover{
    color: #ffffff;
    background-color: #68cff2;
}

This works for the background-color as in it only changes the background colour for <a> </a>'s that have a href="..." but it doesn't change the color of the font for such links... is there any way to sort this?

If it doesn't change the font color, you probably have something with higher specificity overriding the color. Also, you may need to repeat the selector for visited links: `#box1 a:link:hover, #box1 a:visited:hover` (or just use `#box1 a[href]:hover` instead, [more info](http://stackoverflow.com/questions/10587245/is-there-a-reason-to-use-a-instead-of-alink-or-avisited-in-my-stylesheet/10589840#10589840)). — BoltClock, Sep 07 '12 at 19:20
Those are the only styles I have selecting the colour of elements for each box... :/ — simonthumper, Sep 07 '12 at 19:24
Try looking in your browser's developer tools and see what's going on in the CSS panel. You may also wish to show your HTML. — BoltClock, Sep 07 '12 at 19:25
Thank you very much!! Adding the `#box1 a:visited:hover` worked :) — simonthumper, Sep 07 '12 at 19:33
I just noticed that you're using `` to highlight key information. That's not quite appropriate. I've edited my answer to address that bit. — BoltClock, Sep 07 '12 at 19:48
I'm wondering about this too - why not just use the generic `` to add bits of color and other decorative stuff? — user428517, Sep 07 '12 at 20:02

score 7 · Accepted Answer · edited May 23 '17 at 12:27

The :link pseudo-class only applies to unvisited links, as opposed to all links. Remember that you have visited links to account for as well. You may need to repeat the selector for visited links, as I notice that you haven't done so:

#box1 a:link:hover, #box1 a:visited:hover {
    color: #ffffff;
    background-color: #68cff2;
}

(or just use #box1 a[href]:hover instead, more info)

I should add, though, that you shouldn't be using <a> tags to mark up things that aren't links and don't serve as anchors either, just to "add a bit of colour to the site and to attract viewers to key bits of information". That's not what they're designed for. A more semantic alternative would be something like <em> or <strong>, though of course you have to remove the italic or bold style if you don't want it:

#box1 a, #box1 em {
    font-style: normal;
    color: #68cff2;
}

#box1 a:hover{
    color: #ffffff;
    background-color: #68cff2;
}

Then you won't need to specify the :link and :visited pseudo-classes, since you can basically guarantee that all your remaining <a> elements are links.

I tried the `a[href]:hover` method as well as the simple foolish other mistake I made :P and it didn't seem to work. — simonthumper, Sep 07 '12 at 19:38
@simonthumper: Hmmm, weird. Well the proper *CSS* way is to use the pseudo-classes, plus you get free IE compatibility anyway so why not ;) — BoltClock, Sep 07 '12 at 19:40

score 3 · Answer 2 · answered Sep 07 '12 at 19:40

3

Is there a need for a:link:hover{}? Just try using a:hover {}

answered Sep 07 '12 at 19:40

Scrimothy

2,536
14
23

score 1 · Answer 3 · edited Jul 10 '20 at 08:10

1

a:hover will also affect the anchor tags, which can be confusing to end-users if they behave in the same way as links.

edited Jul 10 '20 at 08:10

xKobalt

1,498
2
13
19

answered Jul 09 '20 at 12:20

jgramp

11
2

CSS selector a:link:hover

3 Answers3