2

On my site http://www.robertfikesiv.com/ when you touch an element with a :hover event, the :hover properties will stay active until another element is touched that has a :hover property. The only way to remove the properties from being active is to refresh the page.

How do I disable the :hover event for ony touch screen devices?

Robbie Fikes
  • 409
  • 4
  • 15
  • find if the device is touch screen using mordernizr and then add a class based on it and maybe override your :hover properties. just a thought refer: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript – Sai Dec 23 '14 at 20:52

2 Answers2

1

You can add a class to the html element that identifies a non touch device, and on the first 'touchstart' event remove that class. The below code is a rudimentary example, but it should work none the less.

HTML

<html class="notouch">...

CSS

.notouch .clickable:hover{
   color: #f00;
}

JS

document.documentElement.addEventListener('touchstart', function(){
    var className = document.querySelector('html').className;
    document.querySelector('html').className = className.replace(/notouch/, '');
}, false);
Aaron Levine
  • 124
  • 1
  • 5
0

Look into a handy new thing called pointer-events. If you put pointer-events: none on an element then hover and click events will be disabled, even in JS.

marinersfanfromny
  • 46
  • 2