CODEWITHSUNDEEP
iphonecssioshovermobile-safari
davecave
davecave

Reputation: 4818

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

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

Upvotes: 2

Views: 6087

Answers (2)

davecave
davecave

Reputation: 4818

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.

Upvotes: 0

Srikar Appalaraju
Srikar Appalaraju

Reputation: 73588

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...

Upvotes: 1

Related Questions