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懸停效果不起作用

回答

相關問題