43

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.

1
  • 1
    you're question is actually rather vague; i'm not sure if you are asking how to do it in either, or can it be done in CSS alone. If you would like more information on how this can be done in javascript please update you're question and I can update my answer :)
    – rlemon
    Nov 30, 2011 at 23:29

3 Answers 3

73

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.

6
  • 1
    This works. Thanks. But I'd love an explanation of why ontouchstart="" and onmouseover="" achieve the desired effect. Certainly not self-evident to me. May 14, 2013 at 23:52
  • 8
    Well, I may not be the best person to explain this, but the way I understand it is this: ontouchstart and onmouseover are listeners, they wait for the element in question to be touched or moused over (in this case) then would call the javascript function that is named inside the quotes. In our case, we left the quotes empty so no script was executed, but because the listeners are there, the web browser still considers them active. The :active pseudo class is applied to an element if it is currently active with javascript. The listeners cause the :active pseudo classes to be applied. May 15, 2013 at 2:53
  • 1
    I hope that helps. I'm not very eloquent. May 15, 2013 at 2:54
  • 1
    Can you please post a link to a JSFiddle? I'm not able to replicate this in my code.
    – Lasha
    May 27, 2014 at 20:36
  • @Lasha I'll put one up when I have some free time. Jun 26, 2014 at 16:34
6

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

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>
1
  • 2
    @matthewpavkov it would work but it should be addEventListener rather than addEventlistener. Jun 11, 2014 at 0:38
3

If anyone is still having this issue in 2020 and beyond this article helped me.

My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.