javascript – 如何在禁用模式下停止按钮的悬停效果

前端之家收集整理的这篇文章主要介绍了javascript – 如何在禁用模式下停止按钮的悬停效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在禁用模式下停止按钮的悬停效果.
在禁用按钮后我无法停止悬停效果我已经尝试但是工作不正常,请帮助我,我想改变以获得良好的效果.
  1. <div id="prevnexts">
  2. <button id="prevs" class="navButs tprev" disabled="">Prev</button>
  3. <button id="nexts" class="navButs tnext" enabled="enabled">Next</button>
  4. </div>

CSS

  1. #prevnexts {
  2. height: 22px;
  3. left: 50px;
  4. position: absolute;
  5. top: 160px;
  6. width: 75px;
  7. }
  8.  
  9. #prevnexts .tnext,#prevnexts .tprev {
  10. background: url("images/next1.png") no-repeat scroll 0 0 transparent;
  11. border: 1px solid transparent;
  12. height: 25px;
  13. text-indent: -9999px;
  14. width: 33px;
  15. cursor:pointer;
  16. }
  17.  
  18. 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]
  19. {
  20. opacity:0.5;
  21. }
  22.  
  23.  
  24.  
  25. #prevnexts .tprev
  26. {
  27. background:url(images/prev1.png) no-repeat 0 0;
  28. }
  29.  
  30. #prevnexts .tprev:hover
  31.  
  32. {
  33. background:url(images/prev1hover.png) no-repeat 0 0;
  34. }
  35.  
  36. #prevnexts.tnext:hover
  37. {
  38. background:url(images/next1hover.png) no-repeat 0 0;
  39. }

JavaScript的:

  1. $(document).ready(function() {
  2. var cnt = 1;
  3. var maxLinkss =<?PHP echo $mypostall; ?>;
  4. $("#prevs").attr("disabled","disabled");
  5. $(".tprev:hover").remove();
  6. $("#nexts").attr("enabled","enabled");
  7. $(".navButs").click(function(){
  8. if (this.id=="nexts") {
  9. cnt++;
  10. console.log(" + ",cnt);
  11. }
  12. else {
  13. cnt--;
  14. console.log(" - ",cnt);
  15.  
  16. }
  17. if (cnt<0) cnt=0;
  18. if (cnt>maxLinkss-1) {
  19. $("#nexts").attr("disabled","disabled");
  20.  
  21. }
  22. else {
  23. $("#nexts").removeAttr("disabled");
  24.  
  25. }
  26. if (cnt==1) {
  27. $("#prevs").attr("disabled","disabled");
  28.  
  29. }
  30. else {
  31. $("#prevs").removeAttr("disabled");
  32. }
  33. });
  34. });

解决方法

使用: enabled,但IE< 9不支持它:
  1. <style type="text/css">
  2. .my_button{
  3. /* ... */
  4. }
  5.  
  6. .my_button:hover:enabled{
  7. /* this will only show when the button is enabled,*/
  8. /* and the user is hovering over it.. */
  9. }
  10. </style>

猜你在找的JavaScript相关文章