Question

Is it possible to trigger a :hover event whenever a Mobile Safari user single taps on a div area?

It does not have to be a link. Actually, it can’t be a link because the user will go to another webpage.

The hover effect I have applied is actually on a div : #div:hover {color:#ccc;}
I would like for this hover to happen whenever an iPad or iPhone user single taps on the div area.

I know that piece of CSS exists for the background color of a link:
-webkit-tap-highlight-color:rgba(200,0,0,0.4);
But this does not apply to my situation.

If this could apply to the color of the text, for example, then I could use it.

Update: Please see my accepted answer below

Answer 1

I have figured out how to trigger :hover when a user taps on a div area without using javascript. This is done using display:none; and display:block;.

For example:

<div class="block">
    <p>This content is shown *before* the user hovers over .block or taps .block on an iOS device.</p>
    <div class="mask">
        <p>This content is shown *after* the user hovers over .block or taps .block on an iOS device.</p>
    </div>
</div>

CSS:

.block {
    width:300px;
    height:300px;
    background:black;
}

.mask {
    width:300px;
    height:300px;
    background-color:gray;
    display:none;
}

.block:hover .mask {
    display:block;
}

I have found that the :hover only triggers on iOS while using display (as opposed to opacity). Also, CSS transitions ignores display so this cannot be transitioned with CSS. If you’d like the transition for desktop users, you can add opacity:0; and opacity:1;

EDIT: CSS visibility also seems to work.

Thanks for the time.