How to stop the hover effect for a button in shutdown mode

Question

how to stop the hover effect for a button in shutdown mode. I can’t stop the hover effect after pressing the button in the disabled I tried, but it doesn’t work properly, please help me where I want to change in order 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"); } }); }); 

Answer 1

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

Answer 2

You can use the css :not() selector. For example: button:not([enabled="enabled"]) . More on the selector :not() here .