:hover imitation for mobile devices

Question

I want ".joffre-description" to appear on :hover for mobile devices, but clearly :hover on a touchscreen is impossible. Without JS, using only CSS, is there any hacks to turn ".joffre-description" into "opacity: 1" when I touch this initial property (opacity: 0)?

@media (max-width: 858px) {
   .joffre-description {
        top: 13rem;
        position: absolute;
        opacity: 0;
        padding: 3rem;
        height: 30rem;
        background: rgba(247, 192, 138, .8);
    }

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

score 0 · Accepted Answer · answered Mar 28 '21 at 02:50

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

:hover imitation for mobile devices

1 Answers1