Question

I have a layout that uses navigation with two lines of text. These are identified using span. The first span is responding to changes in the CSS, in particular a:hover, but the smaller text isn’t responding.

I’m simply looking to change the colour of the smaller text when hovering, and to understand what I’m not doing or doing wrong.

Any help is appreciated.

Here’s my code.

Answer 1

There is a very subtle solution to your problem. You currently have:

#navigation .pagetitle a:hover{
    font-size: 15px;
    color: orange;
}

But this would be where the anchor was a child of the span. It’s actually the other way around…

#navigation a:hover .pagetitle{
    font-size: 15px;
    color: orange;
}