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:

$("img").click(function(){
     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?

Answers


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() {
      $(this).addClass("hover");
}); 

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

http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover


Need Your Help

Killing of running process in window with VB.NET

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