search

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
http://ianlunn.github.io/Hover/
Other
29.25k stars 5.78k forks source link

Mobile device hover effect not working #89

Closed briviere closed 8 years ago

briviere commented 8 years ago

I have the following html using hovereffect below. It works fine in chrome mobile iPhone 5 simulator but does not work on the actual iphone device in chrome or safari?

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 thumbnail">
    <div class="hovereffect"><img src="http://photosrv.mresdms.com/photosrv/LDON/l/3180565a.jpg" class="img-responsive">
      <div class="overlay">
        <p>   $1,170,000</p>
        <p>1452 BYRON BASELINE RD # 10, LONDON</p><a href="/mls?listingID=578308" class="btn btn-info">View    </a>
      </div>
    </div>
  </div>

It works fine expect on iphone 5

IanLunn commented 8 years ago

You're aware that touch devices won't show a hover effect if the link causes the page to naviagate to another URL?

briviere commented 8 years ago

No I'm still learning about how hovereffects works on mobile devices. I mange to enable the image by putting "onclick=''" in the div which is good enough for now.

thanks

Brian

On Sun, Apr 17, 2016 at 4:29 PM, Ian Lunn notifications@github.com wrote:

You're aware that touch devices won't show a hover effect if the link causes the page to naviagate to another URL?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/IanLunn/Hover/issues/89#issuecomment-211108645

IanLunn commented 8 years ago

A touch device can't detect hover as there is no hovering cursor. An emulator may exhibit hover behaviour because it is used on a computer that does have a cursor. Some touch devices will emulate a hover effect when an element is lightly tapped or the finger is held in place a little longer than it would a tap. A hover is also triggered at the same time as a tap but if adding hover effects to a link, the browser will navigate to another page meaning the hover effect can't be seen anyway.

There are ways to work around this or disable hover effects for touch devices but we leave that up to the developer rather than trying to bake-in a one-size-fits-all solution to Hover.css.