CODEWITHSUNDEEP
csshover
Doug Fir
Doug Fir

Reputation: 21204

Hover and active page styling

I'm attempting to make my anchor text white when a person hovers over a nav item or when the nav item page is active.

Currently, all is well except the text color. Sounds simple enough but I'm struggling.

I'd like the anchor text to become white when the nav item is either hovered over or is the active page. Currently the anchor text just turns grey, I suspect due to the opacity thats on there too.

Here is the code that I have been using:

.dropdown ul li.current_page_item,
.dropdown ul li:hover,
.dropdown ul li.on {
    background-color: orange;
    opacity:0.4;
    color: white;   
}

It could be that this is not the relevant sample of code but I cannot see what else could be important here. I'm working on a Wordpress site and am finding working with the CSS a little tricky. Here is the site itself if anyone thinks I've not added the relevant snippet: http://tinyurl.com/m562wgd

Upvotes: 0

Views: 161

Answers (4)

Pifalo
Pifalo

Reputation: 1

You're right that it's the opacity that's making the text appear gray. The way you have the code you are applying a 40% opacity to the white text. If you truly want white, either drop the opacity completely or make it a higher value (0.9).

Not sure why you want the opacity, but keep in mind that not all browsers recognize opacity - and show the 100% white. And I believe IE8 and lower do not support the :hover psuedo-class on anything but an tag.

.dropdown ul li.current_page_item a,
.dropdown ul li a:hover,
.dropdown ul li.on a {
    background-color: orange;
    opacity:0.4;
    color: white;   
}

Hope this helps.

Upvotes: 0

Nagarjun
Nagarjun

Reputation: 2466

Add the css to hyperlink inside the li tag

.dropdown ul li a:hover {color: white;}

Upvotes: 1

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 120917

The anchor tag does not inherit the color from its parent, so you should set it explicitly:

.dropdown ul li:hover a{
    color: white;   
}

Upvotes: 1

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

Remove color: white; from your .dropdown ul li.on rule and instead add it to this new css rule:

.dropdown ul li:hover > a {
   color: white;
}

Upvotes: 1

Related Questions