Efekt zawieszania CSS nie działa

Poniższy kod działa dobrze w 9, a nie działa w żadnej innej przeglądarce. Kiedy mysz aktywowania na liście tło zmieni kolor, ale robi to działaEfekt zawieszania CSS nie działa

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

Źródło

2013-06-29 user2466994

menunews klasa już wspomniałem na li, stąd css powinny być li.menunews a: hover {....} – Pbk1303

dokłada swoją div dominującą ul mają .menunews klasę ??, bo napisałeś css w ten sposób, – Pbk1303

http://jsfiddle.net/Kritika/L767M/ sprawdź to jsfiddle – Pbk1303

hej rzeczywiście dokonaniu CSS w jakiś inny sposób, dlatego przeglądarek nie rozumie Twój kod css więc zrobiłem kilka zmian w swojej css i działa dobrze na wszystkich przeglądarkach zgodnie z wymaganiami, więc mam nadzieję, że to ci pomoże .....

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>

Źródło

2013-06-29 06:43:44

Zdefiniuj klasę przy ul zamiast li tak, aby odniosły skutek:

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

Źródło

2013-06-29 05:04:40 Afsar

Oto wersja demonstracyjna jsFiddle (http://jsfiddle.net/roryokane/RZVma/) tej poprawki. To demo również przeformatowało kod HTML i CSS, aby kod był łatwiejszy do odczytania i edycji, a ja poprawiłem dwa wystąpienia łącznika, mając po nim spację, której nie powinno tam być ("dekoracja tekstu" i "kolor-stop"). –

@ RoryO'Kane, dzięki – Afsar

wspomniałeś klasę menunews na li, css powinno być li.menunews, użyj poniższego kodu 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; 
     }

proszę zobaczyć DEMO

Źródło

2013-06-29 05:39:11 Pbk1303

Efekt zawieszania CSS nie działa

Odpowiedz

Powiązane problemy