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"); 
}
});  
}); 

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"); 
}
});  
}); 

• javascript
• jquery
• css
• jquery-events

• What is thebpoint of the enabled attr if all non disabled elements are enabled? – rlemon Commented Jul 4, 2012 at 11:01
• Also iirc you should be using prop.. attr sets attribs which only really apply on load – rlemon Commented Jul 4, 2012 at 11:02
• on load $("#prevs").attr("disabled","disabled"); because initially prev button disabled. – user1501278 Commented Jul 4, 2012 at 11:08
• basically what i am expecting. mouseover effect i need only on button enabled.(but In my script mouse effect is working on button disabled contition.that is wrong) – user1501278 Commented Jul 4, 2012 at 11:11
• Would you mind putting examples like these on JSFiddle, so they are easier to understand and play around with? – WrongAboutMostThings Commented Jul 4, 2012 at 11:38

2 Answers 2

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>

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