css - Media query for devices supporting hover -

i'd provide separate behaviour browsers supporting hover (e.g. desktop browsers) , ones don't (e.g. touchscreen devices). want declare hover state on browsers support it, not browsers don't, avoid having mobile browsers emulate taps, breaks other interactions on page - not defining hover state browsers avoided.

i've read on interaction media queries feature , looks should trick. i'd able like:

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

according caniuse available on browsers need support except ie11 , firefox.

so wondered if other way around - since main touch devices support it, negate it:

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

however, doesn't seem work @ all.

pseudocode example of i'm trying do:

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

so, there way make work in way intended, or down wrong track?

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

wrong:

@media not (hover: none) 

correct:

@media not , (hover: none) 

yes, unintuitive , weird. source (see comments).

so not need javascript alternate result of media query.