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

Question

我有以下html和CSS： http : //jsfiddle.net/5hX6S/

这个想法是要有一个链接的项目列表，然后当用户在列表项目上滚动时，它会以不同的颜色点亮，并且内部文本的颜色变为白色。

您可以在上面的jsfiddle中看到所有外观，我的问题是整个项目的背景确实变成了橙色，但文本却没有。 仅当您直接在文本上方滚动时，文本才会更改，这还不够。 我还想使整个列表成为一个链接，而不仅仅是其中的文本。

我尝试将div，span，任何内容都不放在列表中，并使用以下css移动您看到的类：

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

但是什么都行不通。 到目前为止，唯一成功的方法是将'a'标签移到'li'标签之外，但就我而言，这不是正确执行语法的正确方法。 有什么建议吗？

Answer 1

您是否要在链接上产生悬停效果？ 还是列表本身？ 如果您希望链接在悬停时更改颜色，则在CSS中

 .side_menu_link a:hover { 
    color: color;
    }

等等

Answer 2

这个给你

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

您需要更换它

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

与此

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

Answer 3

你要

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

代替，以使新的背景颜色仅适用于<a>标签，而不是整个<div class="side_menu_link">

Answer 4

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

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