Everyone has been pushing towards feature detection for a long time. I'd like to detect if a visitor's browser supports the :hover pseudo class. It's my understanding there are enough, if not most, mobile devices that do not support hovering, so I'd like to gear my event listeners accordingly. But without mobile detection, I'm unsure how to accomplish this, and I've not found anything via Google or SO thus far.
Perhaps something similar to question #8981463
$(function() {
var canHover = $(document).is(":hover");
});
I won't be able to test this on a mobile device 'till next week.
Thoughts?
Everyone has been pushing towards feature detection for a long time. I'd like to detect if a visitor's browser supports the :hover pseudo class. It's my understanding there are enough, if not most, mobile devices that do not support hovering, so I'd like to gear my event listeners accordingly. But without mobile detection, I'm unsure how to accomplish this, and I've not found anything via Google or SO thus far.
Perhaps something similar to question #8981463
$(function() {
var canHover = $(document).is(":hover");
});
I won't be able to test this on a mobile device 'till next week.
Thoughts?
Share Improve this question edited May 23, 2017 at 12:31 CommunityBot 11 silver badge asked May 9, 2014 at 5:41 Keith DCKeith DC 6732 gold badges9 silver badges25 bronze badges 6 | Show 1 more comment3 Answers
Reset to default 14There is now a well-supported media query to detect whether hover is supported: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
Which you can use with Window.matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Then you would use:
if (window.matchMedia( "(hover: none)" ).matches) {
// hover unavailable
}
There is no is(':hover'), you can't detect CSS pseudo classes with javascript as they are not part of the DOM.
You can however detect certain events that are only available on touch screens and act accordingly, modernizer does something like this
if ('ontouchstart' in document.documentElement) {
document.documentElement.classList.add('touch');
} else {
document.documentElement.classList.add('no-touch');
}
where it adds classes to the <html> element that tells you wether or not the device has a touch screen or not, so you can do something like this in CSS
.no-touch .element:hover {color: red;} // for users with a mouse
.touch .element {color: blue;} // for touch devices
Couldn't sleep, and may have figured it out, at least perhaps for my particular situation. I use sprites on these buttons and I'm already doing sprite position checks elsewhere. My thought is when the button is clicked, prior to firing, it can also do the sprite position check. If the sprite hasn't been re-positioned for the clicked button, it would seem it is not a hover-able device, and I can treat the click as the 1st of a 2-part activation. I read earlier today that some mobile devices do that already, in that they treat the 1st click as the hover.
My sprite positioning logic as as such, and perhaps could be called prior to the button's click-fire event:
if ($(elem).css('background-position').indexOf('76px') >= 0 ) {
hover-ability? In general to tell if it's a mobile device? To disable hovering for mobile devices? – try-catch-finally Commented May 9, 2014 at 5:57