CSS Media Query hover test

by tobek

HTML

<div class="requires-hover">
  hover time!
</div>

<div class="result"></div>

CSS

.requires-hover {
  display: none;
}
@media (hover: hover) {
  .requires-hover {
    display: block;
  }
}

JavaScript

var hoverTimeEl = document.querySelector('.requires-hover');

var style = window.getComputedStyle(hoverTimeEl);

var canHover = style.display !== 'none';

document.querySelector('.result').innerHTML = 'This device CAN' + (canHover ? '' : ' NOT')  + ' hover';