Changing :hover to touch/click for mobile devices

Solution 1:

If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine

Solution 2:

You can add onclick="" to hovered element. Hover will work after that.

Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.

Solution 3:

document.addEventListener("touchstart", function() {}, true);

This snippet will enable hover effects for touchscreens

Solution 4:

I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focus for the other mobile browsers.

Example html:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }