Detect hover capability

Question

The :hover CSS pseudo-class doesn't work well on touch devices. The hover state tends to stick until something else is touched. So in our web apps, we use Modernizr to detect browsers/devices with touch capability, and we disable hover states in those cases:

.no-touch .button:hover { ... }

This becomes a problem on a hybrid device that supports both a touchscreen and a pointer device, such as a mouse or touchpad. Modernizr detects that it is touch-enabled and none of the hover states work when using the mouse.

What would be more useful is to detect the presence of the mouse or other pointer device instead of the touchscreen. But I am unable find find anything like this.

Any suggestions?

Answer 1

I know this is an old question, but for googlers landing here, this media query will do the job:

@media not all and (hover: none) {
  .hoverspecificstyles:hover {
    display: block;
  }
}

Taken from this answer

Answer 2

You can try jQueries .mouseover() .mouseenter() .mouseout() .mouseleave()

Im not sure if this answers your question but this is a different way on going about hovers and detecting when a "pointer" enters over something. Also you could use media queries for your :hover in your css, and I guess, turn them off. Or do something else at a certain width of the users screen size. 800px being something like an ipad size. Below is some code, I really hope this works!

$(document).ready(function(){ 
  $(".box").mouseover(function(){
    var duhbox = $(".box").addClass("black");
    duhbox.animate({borderRadius: "50px"});
  });
  $(".box").mouseout(function(){
    var goBack = $(".box").removeClass("black");
    goBack.animate({borderRadius: "0px"});
  });
});

.box{
  height: 150px;
  width:  150px;
  background-color: royalblue;
  border: 1px solid black;
}

.black{
  background-color: black;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

if this does not work like you wanted it to. Ill think of other ways!