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?

Answer 1

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.

Answer 2

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

Answer 3

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