I&#39;d like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don&#39;t (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don&#39;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&#39;ve read up on the [Interaction Media Queries](https://drafts.csswg.org/mediaqueries-4/#hover) feature and it looks like it should do the trick. I&#39;d be able to do something like:

    @media (hover: none) {
      /* behaviour for touch browsers */
    }

According to [CanIUse](http://caniuse.com/#feat=css-media-interaction) 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&#39;t seem to work at all.

Pseudocode example of what I&#39;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?

All Interaction Media-Features Solutions on Gang of Coders

Total of 1 Interaction Media-Features Solutions

Media query for devices supporting hover