Media query for devices supporting hover

Question

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 declar

Answer 1

You can use this Sass mixin to style the hover, it will use the recommended substitute :active for touch devices. Works on all modern browsers and IE11.

/**
 Hover styling for all devices and browsers
 */
@mixin hover() {
    @media (hover: none) {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        &:active {
            @content;
        }
    }

    @media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        &:hover {
            @content;
        }
    }
}

.element {
    @include hover {
         background: red;
    }
}