I was going to post my own solution, but checking if someone already posted it, I found that @Rodney almost did it. However, he missed it one last crucial that made it uniseful, at least in my case. I mean, I too took the same .fakeHover
class addition / removing via mouseenter
and mouseleave
event detection, but that alone, per se, acts almost exactly like "genuine" :hover
. I mean: when you tap on a element in your table, it won't detect that you have "leaved" it - thus keeping the "fakehover" state.
What I did was simply to listen on click
, too, so when I "tap" the button, I manually fire a mouseleave
.
Si this is my final code:
.fakeHover {
background-color: blue;
}
$(document).on('mouseenter', 'button.myButton',function(){
$(this).addClass('fakeHover');
});
$(document).on('mouseleave', 'button.myButton',function(){
$(this).removeClass('fakeHover');
});
$(document).on('button.myButton, 'click', function(){
$(this).mouseleave();
});
This way you keep your usual hover
functionality when using a mouse when simply "hovering" on your buttons. Well, almost all of it: the only drawback somehow is that, after clicking on the button with the mouse, it wont be in hover
state. Much like if you clicked and quickly took the pointer out of the button. But in my case I can live with that.