Hover effects using CSS3 touch events

by

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.

More Related Contents:

  1. How can I transition height: 0; to height: auto; using CSS?
  2. Transitions on the CSS display property
  3. Using CSS for a fade-in effect on page load
  4. How to use jQuery to wait for the end of CSS3 transitions?
  5. position: fixed doesn’t work on iPad and iPhone
  6. How do I normalize the CSS3 transition end events across browsers?
  7. Does css hover work on mobile devices?
  8. what’s faster? CSS3 transitions or jQuery animations?
  9. Programmatic SMS [closed]
  10. Expand div from the middle instead of just top and left using CSS
  11. css transition with linear gradient [duplicate]
  12. :touch CSS pseudo-class or something similar?
  13. Mobile site – force landscape only / no auto-rotate
  14. iframe size with CSS on iOS
  15. CSS3 Fade Effect
  16. CSS: Animation vs. Transition
  17. Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed
  18. CSS transitions with calc() do not work in IE10+
  19. How to transition CSS display + opacity properties
  20. CSS3 Transform affecting other elements with chrome/safari
  21. Does Internet Explorer support CSS transitions?
  22. CSS transitions do not work when assigned trough JavaScript
  23. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  24. Using Modernizr to test for tablet and mobile – Opinions wanted
  25. Image moves on hover when changing filter in chrome
  26. webkit transform blocking link
  27. What is the state of whitelisting in phonegap 1.3.0?
  28. Drawing border colors during a CSS transition
  29. Combination of animation and transition not working properly
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment