Effetto hover CSS non funzionante

Il codice riportato di seguito funziona bene in 9 e non funziona in nessun altro browser. Quando ho passaggio del mouse sulla lista di sfondo cambierà il colore, ma non lavorareEffetto hover CSS non funzionante

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

fonte

2013-06-29 user2466994

menunews classe che hai menzionato per la Li, da qui il css avrebbe dovuto essere li.menunews a: hover {....} – Pbk1303

funziona il vostro div genitore del ul hanno .menunews classe ??, perché hai scritto il css in questo modo, – Pbk1303

http://jsfiddle.net/Kritika/L767M/ consulta questo jsfiddle – Pbk1303

hey in realtà hai fatto la CSS in qualche altro modo che è il motivo per cui i browser non capisce il codice css così ho fatto alcuni cambiamenti nel vostro css e funziona bene su tutti i browser secondo le vostre esigenze quindi spero che questo vi possa aiutare .....

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>

fonte

2013-06-29 06:43:44

Definire la classe in ul invece di li in modo da entrare in vigore:

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

fonte

2013-06-29 05:04:40 Afsar

Ecco una [jsFiddle demo] (http://jsfiddle.net/roryokane/RZVma/) di questa correzione. Quella demo ha anche riformattato HTML e CSS per rendere il codice più facile da leggere e modificare, e ho corretto due occorrenze di un trattino con uno spazio dopo di esso che non dovrebbe essere lì ('text-decoration' e' color-stop'). –

@ RoryO'Kane, grazie – Afsar

hai nominato menunews classe a li, il css avrebbe dovuto essere li.menunews, utilizzare il codice css sottostante

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

consulta questo DEMO

fonte

2013-06-29 05:39:11 Pbk1303

Effetto hover CSS non funzionante

risposta

Problemi correlati