Html CSS 悬停效果对我的代码不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17376856/
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
CSS hover effect is not working on my code
提问by user2466994
Below code works fine in ie 9 and doesn't work in any other browser. When I mouse hover on list background should change the color, but it doesn't.
下面的代码在 ie 9 中工作正常，在任何其他浏览器中都不起作用。当我将鼠标悬停在列表背景上时应该会改变颜色，但不会。
.menunews ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menunews a {
display: block;
color: #266CAE;
height: 30px;
background: #ffffff;
border-bottom: 1px solid #ccc;
overflow: hidden;
width: 100%;
height: 2.72em;
line-height: 2.75em;
text-indent: 2.02em;
text-decoration: none;
}
.menunews li a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color- stop(47%, #f6f6f6), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
color: #266CAE
}<ul style="font-size:12px;">
<li class="menunews">
<a href=""><span style="margin-left:2px;">Hello test</span></a>
</li>
</ul>回答by Shailender Arora
hey actually you made the CSSin some other way that's why browsers doesn't understand your css codeso i made some changes in your cssand its working fine on all browsers as per your requirement so i hope this will help you.....
哎其实你做的CSS中，这就是为什么浏览器不理解你的一些其他的方式CSS代码，所以我做了你的一些变化的CSS和所有浏览器都按您的要求它做工精细，所以我希望这将帮助你.... .
ul li.menunews {
border-bottom: 1px solid #ccc;
list-style:none;
height:30px;
}
ul li.menunews a {
display:block;
color:#266CAE;
text-decoration:none;
}
ul li.menunews:hover {
background:#ffffff;
background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );color:#266CAE}
}<ul style="font-size:12px;">
<li class="menunews"><a href="#"><span style="margin-left:2px;">Hello test</span></a></li>
</ul>回答by Afsar
Define your class in ul instead of li so as to take effect :
在 ul 而不是 li 中定义您的类以使其生效：
<ul class="menunews" style="font-size:12px;"><li ><a href="#" >
回答by Pbk1303
you have mentioned menunewsclass to li, the css should have been li.menunews,use the below css code
你已经提到了menunews类li，css应该是li.menunews，使用下面的css代码
ul{
margin:0px;
padding:0px;
list-style-type:none;
}
.menunews a{
display:block;
color:#266CAE;
height:30px;
background:#ffffff;
border-bottom: 1px solid #ccc;
overflow:hidden;
width:100%;
height:2.72em;
line-height:2.75em;
text-indent:2.02em;
text- decoration:none;
}
li.menunews a:hover{
background:#ffffff;
background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
color:#266CAE;
}
Please see this DEMO
请看这个DEMO
