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

Windows Equivalent of System Configuration Directory

windows ruby configuration command-line configuration-files

I am developing a CLI application in Ruby, and I'd like to allow configuration in Unix via the standard config file cascade of /etc/appnamerc, ~/.appnamerc. However, the application is also meant t...

Compiling a LaTeX document from C++ program

c++ osx compilation latex

I am writing a C++ program which has to automatically generate some data to be used by students in an integrated exercise. I have already exported this data to .tex files and would also like the C++

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.