Menu
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");
}
});
});
416
asked Jul 04 '12 10:07
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
This is a good solution in SASS since the hover effect will get processed for a disabled button unless you wrap it in not block.
One method to do this is to add: pointer-events: none; to the element, you want to disable hover on. (Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
