Question

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?

Answer 1

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");
});