Changing :Hover to Touch/Click For Mobile Devices

Changing :hover to touch/click for mobile devices

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

:hover imitation for mobile devices

You could use :active selector following the :hover pseudo class to achieve the desired effect in mobile devices.

.joffre-description:hover, .joffre-description:active {
    opacity: 1;
    transition: 0.5s;
}

Another interesting option to explore would be

 @media(hover: hover) and (pointer: fine) {
    //Code goes here.
 }

More on the same here - https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

change :hover to click/tap function on mobile/touch devices not working

You don't need to use Modernizr for checking touch events, you could do it this way:

var event = ('ontouchstart' in window) ? 'click' : 'mouseenter mouseleave';

$('.design-section figure').on(event, function () {
    $(this).toggleClass('open');
});

Also, your using of Conditional (ternary) Operator is wrong, I fixed it. Read about right syntax.

How to remove/ignore :hover css style on touch devices

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>