2012-07-04 47 views
6

如何在停用模式下停止按钮的悬停效果。 我无法停止按钮后禁用悬停效果禁用我已经尝试,但那是行不通,请帮助我,我想改变,以获得良好的结果。如何在停用模式下停止按钮的悬停效果

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

什么是thebpoint启用attr的,如果所有的非禁用的元素被启用? – rlemon

+0

另外iirc你应该使用prop .. attr sets attribs哪些只适用于加载 – rlemon

+0

加载$(“#prevs”)。attr(“disabled”,“disabled”);因为最初prev按钮被禁用。基本上我期待的是 – user1501278

回答

1

你可以使用CSS :not()选择。例如:button:not([enabled="enabled"])。有关:not()选择器here的更多信息。

10

用途:enabled,但IE 9 <不支持:

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