CSS: hover, focus or active not working on mobile devices

Question

I have simple card when I hover on it card scale. But on mobile devices is not working hover, focus or active.

On mobile devices I need when someone click on this card, card make hover, focus or active.

Is there any option how to do it?

 .card { transition: transform .2s; background-repeat: no-repeat; max-width: 25%; min-width: 25%; height: 200px; margin: 50px; background: lightblue; } .hover-content { display: none; width: 80%; height: 50%; margin: 0 auto; } .content { background: red; } .card:hover, .card:focus, .card:active { position: relative; z-index: 2; opacity: 1; transform: scale(1.2); } .card:hover .hover-content, .card:focus .hover-content, .card:active .hover-content { margin-top: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

 <div class="card"> <div class="content"> <p>iasJ ASJKAS AISJ</p> </div> <div class="hover-content"> <p>aksainsi qjsn asj iqjsi asijqs </p> </div> </div>

Answer 1

A div element cannot be focused without a tab index. See what happens if you set the tab index of one of your divs to being a number.

Hover, of course, makes no sense if the interface is a touch interface. Fingers cannot hover over most touch screens, so I believe most mobile browsers either treat it funny or ignore it.

Answer 2

If you are looking for a pure CSS solution then you may have trouble finding one. Historically, css does not handle touchscreen or mobile hover states very well at all. There are a lot of inconsistencies from one device to another on just how they handle these states.

If you do not want to get javascript involved, then what I'd suggest is just making the layout of your page simpler on the mobile layout. Meaning, use media queries to display your information in a more straightforward way.

If you do want to get javascript involved then you could use the touchstart and touchend events. In that case you could attach those events to the html elements you want and just trigger the css states with your js. This is definitely going to be a slower way to accomplish what you need but if you absolutely need the mobile view to have a hover state then that's a way to do it.

Hope that helps.

Answer 3

Hover doesnt work in mobile rather onclick.

you may need to look for some touch event css if you looking for only css as solution.

else writing custom js function is the way

Answer 4

For focus or active events, you can change temporarily the style with JQuery like this:

$('#your-element').addClass("your-class"); 
setTimeout(function(){ $('#your-element').removeClass("your-class"); }, 300);