CSS悬停效果不起作用

下面的代码在ie 9中可以正常工作，并且不能在任何其他浏览器中使用。当我鼠标在名单背景悬停会改变颜色，但它不工作CSS悬停效果不起作用

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

的Html

<ul style="font-size:12px;"><li class="menunews"><a href="" > 
<span style="margin-left:2px;">Hello test</span></a></li></ul></div>

来源

2013-06-29 user2466994

menunews类，你刚才提到它的利，因此CSS应该是li.menunews：悬停{....} – Pbk1303

做了UL的父DIV有.menunews类??，因为你已经写了这样的CSS， – Pbk1303

http://jsfiddle.net/Kritika/L767M/看看这个jsfiddle – Pbk1303

哎其实你这是一些其他的方式取得了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>

来源

2013-06-29 06:43:44

定义类在UL，而不是李以生效：

<ul class="menunews" style="font-size:12px;"><li ><a href="#" >

来源

2013-06-29 05:04:40 Afsar

这是一个[jsFiddle演示]（http://jsfiddle.net/roryokane/RZVma/）这个修复。该演示还重新格式化了HTML和CSS，以使代码更易于阅读和编辑，并且我修复了后面应该没有空格的连字符（'text- decoration'和'color-stop'）的两个连字符。 –

@ RoryO'Kane，谢谢 – Afsar

你有提到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; 
     }

请参阅本DEMO

来源

2013-06-29 05:39:11 Pbk1303

CSS悬停效果不起作用

回答

相关问题