Checking device hover capabilities with JavaScript using interaction media features

by Blackbam

HTML

<div class="demo" id="any-hover-none">Any Hover: None</div>
<div class="demo" id="hover-none">Hover: None</div>
<div class="demo" id="any-hover-hover">Any Hover: Hover</div>
<div class="demo" id="hover-hover">Hover: Hover</div>

CSS

.demo {
  margin:20px;
  width:100px;
  height:100px;
  background-color:#911;
  color:#fff;
  padding:10px;
  border-radius:10px;
  float:left;
}

.demo.yes-i-can {
  background-color:#191;
}

JavaScript

if(window.matchMedia("(any-hover: none)").matches) {
	document.getElementById('any-hover-none').classList.add('yes-i-can');
}

if(window.matchMedia("(hover: none)").matches) {
	document.getElementById('hover-none').classList.add('yes-i-can');
}

if(window.matchMedia("(any-hover: hover)").matches) {
	document.getElementById('any-hover-hover').classList.add('yes-i-can');
}

if(window.matchMedia("(hover: hover)").matches) {
	document.getElementById('hover-hover').classList.add('yes-i-can');
}