CODEWITHSUNDEEP
cssmobilehover
user3447186
user3447186

Reputation: 33

CSS3 slide-up on div-hover doesn't work on mobile/tablet

I'm trying to make a simple hover-effect with css3. It works fine on pc, but not completely on mobile. When I touch an image, it slides up, but when I touch text or a div, it won't work.

Here's my fiddle

Works fine on desktop PC, doesn't work on mobile/tablet (iPhone/iPad):

<ul class="grid blockhover">
<li>
    <figure>
        <div><h1>headline</h1></div>
        <figcaption>text text text text text</figcaption>
    </figure>
</li>
</ul>

Works fine on mobile/tablet

<ul class="grid blockhover">
<li>
    <figure>
        <div><img src="http://www.adhoc-media.de/data/adhoc/test.jpg" alt=""></div>
        <figcaption>text text text text text</figcaption>
    </figure>
</li>
</ul>

Upvotes: 1

Views: 253

Answers (1)

KM123
KM123

Reputation: 1377

In this case mobile browsers do not recognise the hover instruction for elements such as Divs or H1's but it does for imgs

The best way around this would be to use jQuery to handle the interaction instead of CSS as this is widely supported by 99% of devices!

I hope this helps!

Upvotes: 1

Related Questions