Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Media query for devices supporting hover

I'd like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don't (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don't, so as to avoid having mobile browsers emulate it with extra taps, as this breaks other interactions on the page - by not defining a hover state for those browsers this is avoided.

I've read up on the Interaction Media Queries feature and it looks like it should do the trick. I'd be able to do something like:

@media (hover: none) {   /* behaviour for touch browsers */ } 

According to CanIUse it is available on all the browsers I need to support except IE11 and Firefox.

So I wondered if I could do it the other way around - since the main touch devices all support it, then negate it:

@media not (hover: none) {   /* behaviour for desktop browsers */ } 

However, this doesn't seem to work at all.

Pseudocode example of what I'm trying to do:

.myelement {   /* some styling */   /* note: no hover state here */ } @media(this device supports hover) {   .myelement:hover {     /* more styling */   } } 

So, is there a way to make this work in the way intended, or am I down the wrong track?

like image 914
moogal Avatar asked Nov 10 '16 16:11

moogal


People also ask

Can I use media query hover?

Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the pointer , any-pointer , hover , and any-hover media features.

What is @media hover hover?

The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.

How do you prevent sticky hover effects for buttons on touch devices?

preventDefault() within ontouchstart or ontouchend. It appears to stop the hover effect when the button is touched, but it also stops the button click animation and prevents the onclick function from being called when the button is touched, so you have to call those manually in the ontouchstart or ontouchend handler.


Video Answer


1 Answers

not should prefix media type (screen, print, all, etc) and not media feature (hover, point, etc).

Wrong:

@media not (hover: none) 

Correct:

@media not all and (hover: none) 

Yes, its unintuitive and weird. Source (see comments).

So you do not need javascript to alternate result of media query.

like image 72
artin Avatar answered Oct 27 '22 01:10

artin