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

Question

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

我们的想法是拥有一个链接项目列表，然后当用户滚动列表项时，它会以不同的颜色亮起，内部文本的颜色会变为白色。

你可以在上面的jsfiddle中看到它的外观，我的问题是整个项目的背景确实变成了橙色，但文本却没有。如果您直接在其上方滚动，则文本只会更改，这是不够的。我还希望将整个列表作为链接，而不仅仅是其中的文本。

我尝试在列表中添加div，span，没有任何内容，并使用以下css移动您看到的类：

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

但没有任何作用。到目前为止，唯一成功的是移动'a＆＃39; ＆＃39; li＆＃39;之外的标签标签，但据我所知，这不是正确的语法方式。那么有什么建议吗？

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;
}

this

#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>