Hover effects using CSS3 touch events

Question

I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.

Basically, the first to

Answer 1

Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.

The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)

    
        

            
Team
        
    

The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful

EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the tag. So your body tag should look like this and your links look like this

    

    
Team
  

EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.