As part of reskinning my blog, I have had to rethink my menu links and CSS. I discovered something interesting that I hadn’t really thought about before. But let’s start with a lesson that got me to where I made that realisation.

LVHA

I recall a time at uni where I was learning about CSS. The phrase Love, Ha! was etched into my brain to remember the letters LVHA, which stand for the 4 pseudo classes of an anchor (a) tag, which were link, visited, hover, active. Link represents an anchor that has an href, somewhere to go. Anchors are not inherently links, that is just one state they could be. Visited is a link that has been clicked before, traditionally seen as a shade of purple rather than blue after you have used it. Hover is of course mouse over, and Active is mouse down. The acronym was used because this was the order you should declare their styles, to ensure expected behaviour. This was back when ie6 was the standard, and XHtml was all the rage. Something to note was that these pseudo-classes only existed on anchors, and hover was only available if it was a link (if my memory serves me correctly).

So armed with all this information, coming back to write some CSS 7 years later, and the acronym is still present on my memory, as well as the explanation why. But now, armed with all the latest “good practice” on how to write CSS I want to keep my styles shallow and general. But I’m also styling defaults for the page, so I want all my default anchors to look a specific way. My menu is also a list of anchors so that the semantics of the markup make sense. On with the show.

I set up my styles roughly like so:

a:link {
  color: Orange;
}
a:visited {
  color: DarkOrange;
}
a:hover {
  color: Blue;
}

Notice the LVH? Didn’t need an active right now but will add that in later. Anyway, the next thing was the menu:

.menu-button{
    display: inline-block;
    background-color: inherit;
    color: orange;
    ...
}
.menu-button:link,
.menu-button:visited {
    color: orange;
}
.menu-button:link:hover {
    color: pink;
    background:blue;
}
.menu-button-current {
    color:blue;
}

You can imagine I have two buttons, one with just .menu-button, and one with .menu-button-current as well.

Current Page Other Page

The problem is, that when I had an anchor without a link, it worked ok. when I had a button with a link, it didn’t pick up the correct colors. It basically looked like a normal menu button.

Current Page Clickable Current Page Other Page

Several attempts to change it got halfway there, but I ended up with a button where the text was still blue on hover. I tried a whole bunch of other things, which are really hard to reproduce again, that I thought, according to precedence, should have worked. The real problem actually came back to the default anchor styles, and the three states an anchor can be in.

An Anchor can be a link, not a link, or visited. Unfortunately, when you hover, it could be hovering in any one of these three states. And best of all, there are only pseudo-classes for two of them. If you explicitly use hover by itself, that’s fine, it applies to all three, but where you are trying to distinguish if it is clickable or not, you might decide to add link so that it fixes things :

.menu-button:link:hover {
    color: pink;
    background:blue;
}

What I completely forgot there was that if I had visited the link, this style does not apply. I had to add visited in there as well. So after a lot of mucking around, I came to this conclusion.

TL;DR

If you want to have different styles for links and nonlinks, make sure you remember visited, and apply this to hover as well.

.mybutton {
    color: black
}
.mybutton:link,
.mybutton:visited {
    color: blue
}
.mybutton:link:hover
.mybutton:visited:hover {
    color: pink;
    background:blue;
}

This way you have plain with no hover by default, and changed with a hover effect otherwise. Unfortunately, there is no way to turn off hover effects if it is not linked or visited, so getting the order of things right is important. If you don’t want hover on unlinked anchor tags, always use :link:hover and :visited:hover instead of just hover on your classes you use with an anchor.

An Alternative, and possibly less confusing solution: add a class to your active links that is different to the class (or no class) that you add to inactive links to ensure you only apply the styles in the right places.

.active-button:hover {
    ...
}

Or the opposite:

.non-active-button:hover {
    ... //force the resetting of the properties you don't want.
}

But I like my solution, less undoing of things along the way.

The other thing I did, for my own sanity, was to remove the a:hover in favor of a more accurate:

a:link:hover,
a:visited:hover {
    color: #00bbf2;
}

There, I fixed it.