Hover effect does not work, need clicks instead

[lantiqo]

The hover effect does not work in the iPhone. Would need to change so that it clicks instead, to make it work on the iPhone.

http://davidwalsh.name/demo/css-flip.php

The hover effect didn´t work in IE or Opera. I need it to work there too.

 

[jpadie]

and what is your question?

(ps. I note that the demo has been updated to work with touch devices)

 

[lantiqo]

An example of a similar page is welcome.
Or if it is sufficient to modify the source code to make it work in any browser, and clicking instead of using the hover effect.

 

[jpadie]

so show the code that you have at the moment that you feel does not work.

 

[Geates]

There is a typo in the css on line 86. I would bet this typo renders this css block useless.

[tt].flip-container:hover .flipper, [red].flip-container.hover[/red] .flipper {[/tt]

should be

[tt].flip-container:hover .flipper, [red].flip-container .hover[/red] .flipper {[/tt]

-Geates

 

[jpadie]

@Geates
works fine on my browsers (ff, chrome, safari) without that fix - but i have not tested IE. iPhone safari and iPhone Chrome too (although on both these the demo page is not scrollable, but the animation works nonetheless).

anyway, not entirely sure why this is a javascript question as the framework the OP points to is a pure CSS version (apart from the minor aspect of assigning a class ontouch). Had the OP wanted a js solution then there are surely hundreds.

 

[Geates]

yeah, it works for me in those browsers but not IE; too strict.

not entirely sure why this is a javascript question as the framework the OP points to is a pure CSS version

That's a good point. Additionally, a js solution would be much more elegant, too.

-Geates

 

[lantiqo]

You are welcome to give suggestions (links) on similar sites (with boxes) that can be turned on (preferably with a nice effect)

 

[jpadie]

Google is your friend.