悬停时更改链接中文本的颜色

Question

I have the following html and css: http://jsfiddle.net/5hX6S/

The idea is to have a list of items which are links and then when the user scrolls over the list item it lights up in a different color and the color of the text inside changes to white.

You can see how it all looks in the jsfiddle above, my problem is that the whole item's background does change into orange but the text does not. The text only changes if you scroll directly above it, which is not enough. I'd also like to make the whole list a link, not just the text inside of it.

I tried putting a div, span, nothing inside of the list and moving that class that you see around using the following css:

.side_menu_link:hover {
    background: #ff7200;
    color: #fff !important;
}

But nothing works. The only thing that succeeded so far was moving the 'a' tags outside of the 'li' tags but as far as I'm concerned that's not the right way to do it syntax wise. So any suggestions?

Answer 1

Are you trying to have the hover effect on the link? Or the list itself? If you want the link to change color on hover then in your CSS have

 .side_menu_link a:hover { 
    color: color;
    }

etc.

Answer 2

Here you are

http://jsfiddle.net/iamnotsam/5hX6S/4/

You needed to replace this

a:hover {
    text-decoration: none;
    color: #fff;
}

with this

#left_menu ul li:hover a {
    text-decoration: none;
    color: #fff;
}

Answer 3

You want

.side_menu_link:hover a { ... }
                     ^^^--- note this

instead, so that the new background color applies ONLY to the <a> tag, not the entire <div class="side_menu_link"> .

Answer 4

 a:hover{color:red;background:green} 

 <a href="#">Home</a>