How to stop hover effect for button in disable mode

css, javascript, jquery, jquery-events

Solution

Use :enabled, but IE<9 does not support it:

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

Problem

How to stop hover effect for button in disable mode? I cannot stop hover effect after a button is disabled. I have tried but that is not working properly, please help me, where I want to change to get good results. ``` <div id="prevnexts"> <button id="prevs" class="navButs tprev" disabled="">Prev</button> <button id="nexts" class="navButs tnext" enabled="enabled">Next</button> </div> ``` CSS ``` #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; } ``` javascript: ``` $(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"); } }); }); ```

Original source