सीएसएस होवर प्रभाव काम नहीं कर रहा

Question

नीचे कोड 9 यानी में ठीक काम करता है और किसी अन्य ब्राउज़र में काम नहीं करता है। जब मैं माउस सूची पृष्ठभूमि पर मंडराना रंग बदल जाएगा, लेकिन यह काम does not

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

Answer 1

हे वास्तव में आप किसी अन्य तरह से है कि में सीएसएस बनाया क्यों ब्राउज़रों अपने सीएसएस कोड नहीं समझती तो मैं अपने सीएसएस में कुछ परिवर्तन किए और आपकी आवश्यकता के अनुसार सभी ब्राउज़रों पर इसका काम ठीक है, इसलिए मुझे उम्मीद है कि यह आपकी मदद करेगा .....

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>

Answer 2

ली के बजाय उल में अपने वर्ग को परिभाषित करें ताकि प्रभावी करने के लिए:

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

Answer 3

आपने menunews कक्षा li का उल्लेख किया है, सीएसएस li.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; 
     } 

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