अक्षम मोड में बटन के लिए होवर प्रभाव को कैसे रोकें

Question

अक्षम मोड में बटन के लिए होवर प्रभाव को कैसे रोकें। मैं विकलांग में बटन के बाद होवर प्रभाव को रोक नहीं सकता मैंने कोशिश की है लेकिन यह ठीक से काम नहीं कर रहा है, कृपया मेरी मदद करें, जहां मैं अच्छे परिणाम प्राप्त करने के लिए बदलना चाहता हूं।

<div id="prevnexts"> 
      <button id="prevs" class="navButs tprev" disabled="">Prev</button> 
      <button id="nexts" class="navButs tnext" enabled="enabled">Next</button> 
</div> 

सीएसएस

#prevnexts { 
height: 22px; 
left: 50px; 
position: absolute; 
top: 160px; 
width: 75px; 
} 

#prevnexts .tnext, #prevnexts .tprev { 
background: url("images/next1.png") no-repeat scroll 0 0 transparent; 
border: 1px solid transparent; 
height: 25px; 
text-indent: -9999px; 
width: 33px; 
cursor:pointer; 
} 

button[disabled]:active, button[disabled], 
input[type="reset"][disabled]:active, 
input[type="reset"][disabled], 
input[type="button"][disabled]:active, 
input[type="button"][disabled], 
select[disabled] > input[type="button"], 
select[disabled] > input[type="button"]:active, 
input[type="submit"][disabled]:active, 
input[type="submit"][disabled] 
{ 
opacity:0.5; 
} 



#prevnexts .tprev 
{ 
background:url(images/prev1.png) no-repeat 0 0; 
} 

#prevnexts .tprev:hover 

{ 
background:url(images/prev1hover.png) no-repeat 0 0; 
} 

#prevnexts.tnext:hover 
{ 
background:url(images/next1hover.png) no-repeat 0 0; 
    } 

जावास्क्रिप्ट:

 $(document).ready(function() { 
    var cnt = 1; 
    var maxLinkss =<?php echo $mypostall; ?>; 
    $("#prevs").attr("disabled","disabled"); 
    $(".tprev:hover").remove(); 
    $("#nexts").attr("enabled","enabled"); 
    $(".navButs").click(function(){ 
    if (this.id=="nexts") { 
    cnt++; 
    console.log(" + ",cnt);  
    } 
    else { 
    cnt--; 
    console.log(" - ",cnt); 

    } 
    if (cnt<0) cnt=0;  
    if (cnt>maxLinkss-1) { 
    $("#nexts").attr("disabled","disabled"); 

    } 
    else { 
    $("#nexts").removeAttr("disabled"); 

    } 
    if (cnt==1) { 
    $("#prevs").attr("disabled","disabled"); 

} 
else { 
    $("#prevs").removeAttr("disabled"); 
} 
}); 
}); 

Answer 1

आप सीएसएस :not() का भी उपयोग कर सकता है। उदाहरण के लिए: button:not([enabled="enabled"])। :not() चयनकर्ता here पर अधिक जानकारी।

Answer 2

उपयोग: enabled, लेकिन आईई < 9 इसका समर्थन नहीं करता:

<style type="text/css"> 
.my_button{ 
    /* ... */ 
} 

.my_button:hover:enabled{ 
    /* this will only show when the button is enabled, */ 
    /* and the user is hovering over it.. */ 
} 
</style>