How to make links, buttons, and divs hover on mobile? - html

Question

I am having trouble making elements hover on a mobile device.
In my CSS, I type something like:
.button:hover {
background-color: #fff;
}
This seems to hover fine on my desktop, however on my iPhone and other touch devices, I can't seem to make the button hover.

Answer 1

There is no hover event on mobile, you can define hover behavior and it will work on desktop. But on mobile, you will see this hover only by click/touch.

Answer 2

Hovers mean one thing on the other. in this case its the mouse cursor over the HTML button or whatever element you use.
In the case of a phone, there is no mouse cursor. its always a click. Hovers in most cases would show only on click or touch. If you really need this you can try the Javascrit onclick() or other functions, so when they click or touch, you can add a bit of something.

Answer 3

For a very quick solution of this problem with jQuery/CSS, I did the following.
wrote styles for my element like this:
.one-block:hover, .one-block.hover { ... }
positioned it:
.one-block { position: relative; }
added the last element in this block -> .mobile-mask:
<div class="one-block">
....
<div class="mobile-mask"></div>
</div>
positioned .mobile-mask:
.mobile-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
hide it for non-mobile (this part is not precise at all: just with css. if you detect mobile devices by some other means and, for example, give a class to body, than it will be more precise. in this case I just need a quick solution):
#media (min-width: 681px) {
.mobile-mask {
display: none;
}
}
create javascript that will add/remove .hover class:
$('.mobile-mask').on('click', function(){
$('.list .mobile-mask').show();
$('.list .one-block').removeClass('hover');
$(this).hide();
$(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
var windowWidth = $(this).width();
if(windowWidth > 680){
$('.list .one-block').removeClass('hover');
}
});