Adding a :hover effect in Mobile Safari when the user "taps"

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

This seems to be an answer: http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers — davecave, Apr 04 '12 at 17:03

score 1 · Answer 1 · answered Aug 21 '11 at 03:48

1

Are you talking about this in context with UIWebview? You can inject CSS or Javascript and treat it as any other browser. If you are doing so I would suggest jQuery

If you are not using UIWebView then we need to define gesture recognizers on the UIView and handle the gestures. i.e. in the gesture handlers make a hover uiview and remove it as the user tap is gone...

answered Aug 21 '11 at 03:48

Srikar Appalaraju

71,928
54
216
264

i think he's talking about mobile safari – kenwarner Aug 21 '11 at 03:59
Oh yes sorry, I am talking about just using CSS in mobile safari. I realize that was unclear. – davecave Aug 21 '11 at 04:05
Yea, I was wondering if this was only possible using javascript. Unfortunately, I don't know enough about javascript to do this kind of thing. (Especially using javascript along with tapping on an iOS device) – davecave Aug 21 '11 at 04:20

davecave · Accepted Answer · 2012-07-13T01:27:03.527

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.

Adding a :hover effect in Mobile Safari when the user "taps"

2 Answers2