Html 如何通过悬停更改 li 标签的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14569661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background-color of an li tag with hover?
提问by Jakob Abfalter
What's the best way to change the background-color of an litag with onMouseOver?
I tried it this way, but it won't work:
li使用 onMouseOver更改标签背景颜色的最佳方法是什么？我这样试过，但它不起作用：
Code generating the HTML:
生成 HTML 的代码：
echo "<a href=".$obj_players->Page." target=_parent>
<li style=\"background-color:#FFFFFF;\"><span class=\"left\">" . $obj_players->Name . "</span><span class=\"right\">" . $obj_players->Viewers . "</span></li></a>";
CSS:
CSS：
#navlist li:hover {
background-color:#2EA620;
}
#navlist li {
width:175px;
height:30px;
text-align:center;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-color:#333;
}
Explanation: I have to declara the background color in the litag because I have different lielements with different background colors. And li's are in a divwith ID navlist.
说明：我必须在li标签中声明背景颜色，因为我有li不同背景颜色的不同元素。并且 li 位于div带有 ID 的导航列表中。
I also have the problem that I don't want every lito change background color with onmouseover, but I will solve this later, since I think I should be able to manage it on my own.
我也有一个问题，我不希望每个人都li用 onmouseover 改变背景颜色，但我稍后会解决这个问题，因为我认为我应该能够自己管理它。
回答by Eric Goncalves
You need to remove the background-color:#FFFFFFinline, and add that to the css. Then #navlist li:hover { background-color:#2EA620; }should work.
您需要删除background-color:#FFFFFF内联，并将其添加到 css 中。然后#navlist li:hover { background-color:#2EA620; }应该工作。
example: http://jsfiddle.net/jU8Pp/
