如何在禁用模式下停止按钮的悬停效果
How to stop hover effect for button in disable mode
如何在禁用模式下停止按钮的悬停效果?禁用按钮后,我无法停止悬停效果。我已经尝试过,但这不能正常工作,请帮助我,我想改变以获得好的结果。
<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");
}
});
});
使用 :
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>
您可以使用
css :not()
选择器。 例如:button:not([enabled="enabled"])
.有关:not()
选择器的更多信息,请单击此处。
相关文章:
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- Flexslider导航按钮在悬停时不可见,带有橙色框
- Facebook登录按钮悬停框
- 鼠标悬停时更改按钮的 CSS
- 将鼠标悬停在按钮上会导致另一个按钮悬停在上面
- 弹出 Div 显示在按钮悬停上
- 按钮悬停效果在不同的 Z 索引上
- 按钮悬停时触发弹出窗口
- 鼠标离开并不总是在我的按钮悬停时触发
- 使用按钮悬停使元素更改颜色
- 交叉褪色提交按钮悬停
- 自定义css单选按钮悬停效果
- CSS按钮:悬停,禁用,然后用javascript重新启用
- 图像与动画CSS +提交按钮悬停
- 如何禁用google +1(+1)按钮's悬停气泡
- Jquery悬停-允许悬停在按钮悬停的另一个DIV上
- 字体真棒社交媒体按钮悬停效果
- Twitter喜欢按钮悬停效果
- 定制';Pin it ';按钮悬停(我不使用博客或WordPress)
- jQuery隐藏li元素,然后在按钮悬停时淡入