title: How to stop hover effect for button in disable mode
body: <p>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.</p>
  <pre><code>&lt;div id=&quot;prevnexts&quot;&gt;
              &lt;button id=&quot;prevs&quot; class=&quot;navButs tprev&quot; disabled=&quot;&quot;&gt;Prev&lt;/button&gt;
              &lt;button id=&quot;nexts&quot; class=&quot;navButs tnext&quot; enabled=&quot;enabled&quot;&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>#prevnexts {
  height: 22px;
  left: 50px;
  position: absolute;
  top: 160px;
  width: 75px;
  }
  
   #prevnexts .tnext, #prevnexts .tprev {
  background: url(&quot;images/next1.png&quot;) 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=&quot;reset&quot;][disabled]:active,
  input[type=&quot;reset&quot;][disabled],
  input[type=&quot;button&quot;][disabled]:active,
  input[type=&quot;button&quot;][disabled],
  select[disabled] &gt; input[type=&quot;button&quot;],
  select[disabled] &gt; input[type=&quot;button&quot;]:active,
  input[type=&quot;submit&quot;][disabled]:active,
  input[type=&quot;submit&quot;][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;
    }
  </code></pre>
  <p>javascript:</p>
  <pre><code>     $(document).ready(function() { 
      var cnt = 1;
      var maxLinkss =&lt;?php echo $mypostall;  ?&gt;;
      $(&quot;#prevs&quot;).attr(&quot;disabled&quot;,&quot;disabled&quot;);
      $(&quot;.tprev:hover&quot;).remove();
      $(&quot;#nexts&quot;).attr(&quot;enabled&quot;,&quot;enabled&quot;);   
      $(&quot;.navButs&quot;).click(function(){   
      if (this.id==&quot;nexts&quot;) {
      cnt++;  
     console.log(&quot; + &quot;,cnt);    
     }
     else {
    cnt--;
    console.log(&quot; - &quot;,cnt);  
  
    }
    if (cnt&lt;0) cnt=0;     
    if (cnt&gt;maxLinkss-1) {
    $(&quot;#nexts&quot;).attr(&quot;disabled&quot;,&quot;disabled&quot;); 
    
     }
     else {
      $(&quot;#nexts&quot;).removeAttr(&quot;disabled&quot;); 
  
    }
    if (cnt==1) {
    $(&quot;#prevs&quot;).attr(&quot;disabled&quot;,&quot;disabled&quot;); 
  
   }
   else {
    $(&quot;#prevs&quot;).removeAttr(&quot;disabled&quot;); 
  }
  });  
  }); 
  </code></pre>