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

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.

Since there is no mouse cursor, you can't hover a button on mobile devices. However, you can use .activate properly to set a background color like so: `.button:activate{...}` — ByWaleed, Sep 05 '17 at 15:10
See https://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices — TylerH, Sep 05 '17 at 15:11
Possible duplicate of [Does css hover work on mobile devices?](https://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices) — Leonardo Alves Machado, Sep 05 '17 at 15:17

score 2 · Answer 1 · answered Sep 05 '17 at 15:10

2

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.

answered Sep 05 '17 at 15:10

P.S.

15,970
14
62
86

score -1 · Answer 2 · answered Sep 05 '17 at 15:19

-1

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.

answered Sep 05 '17 at 15:19

mw509

1,957
1
19
25

I checked both links on my 5.5 inch android 7 chrome browser and they all acted the same. The background changes after I click. While I hold the click the background does not change. Best reason and explanation I can give is devices and browsers all react differently to these things. While some may try as much as possible to replicate experiences, others just know the two devices are not the same and keep them apart. so my advice is focus on universal features than a few. Hovers just do not work like that. You will have to use javascript to play the trick like I said. – mw509 Sep 06 '17 at 10:48
you can a run some tests from this site it simulates several instances for you [link] (http://www.mobilephoneemulator.com/) – mw509 Sep 06 '17 at 10:52

score -1 · Answer 3 · answered Nov 26 '17 at 20:14

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');
  }
});

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

3 Answers3