PostCSS Require Hover

PostCSS plugin that wraps hover selectors in a media media that's only valid on devices that support true hover events. The goal of this plugin is to prevent mobile browsers (mostly iOS) from getting their hover states "stuck" since hover.

Original idea: https://www.quirksmode.org/blog/archives/2012/11/what_the_hells.html

More explicit support for this feature: https://drafts.csswg.org/mediaqueries/#hover

Tested:

• IE11
• Chrome
• Safari
• Firefox
• iOS - Safari/Chrome
• Android - Chrome

Example

.foo {
    bar:hover {
        display: block;
    }
}

.foo {
    @media not all and (hover: none), (-ms-high-contrast: none) {
        bar:hover {
            display: block;
        }
    }
}

Installation

npm install postcss-require-hover

Usage

postcss([require("postcss-require-hover")]);

See PostCSS docs for examples for your environment.