Hover effects using CSS3 touch events

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 touch would perform the hover effect or rollover, and the touch up would perform the roll off.

I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.

Solution 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)

<style>
.boxbutton:active{
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
}
</style>


<body ontouchstart="">
    <a href="#teamdiv">
        <div class="boxbutton" id="teambb">
            <h5>Team</h5>
        </div>
    </a>
</body>

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 <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this

<a href="#teamdiv">
    <div class="boxbutton" id="teambb">
    <h5>Team</h5>
  </div></a>

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.

Solution 2:

If you don't want to modify your HTML code, you could try this:

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>

Hover effects using CSS3 touch events

Solution 1:

Solution 2:

Related

Recent Posts