Replacing CSS3 hover transition with jquery click event

I have a series of images that use css3 to achieve a hover effect. When the use hovers over an image, a caption slides over. It is a very nice effect. On mobile, the user cannot see this hover effect because there is no hovering on mobile. Ideally, I want mobile users to see the caption when they "tap" (same as click) on the image. What is the best approach to convert a css hover selector into a click event? I would assume the best approach is to use jquery. But if I did soemthing like the following, I'm not sure how this would work with CSS3:

     perform css3 hover transitions now

I would place this in a conditional so it only applies to screens below 480px (mobile). My question is, how would I trigger these CSS3 hover transitions as a jquery click event on mobile screens? Any ideas?


sincerely i haven't tried jQuery Mobile yet, but this library provides pseudo-events for mouse events like vmouseover, you can use this event, put the CSS :hover properties in another class and by firing the event add the class to the element:

$('img').live('vmouseover', function() {

According to this what you want is impossible. The suggested fix is to duplicate the css in another, non-pseudo css class.

Need Your Help

Killing of running process in window with VB.NET

How we can kill the other running process in window with VB.NET 2.0 framework?

how to create a C# wrapper class from the C++ tesseract library?

c# c++ wrapper dllimport tesseract

Please guide me on how to create a C# wrapper to access the methods of the tesseract library which is in C++.