postcss-mobile-hover

PostCSS Mobile Hover

PostCSS plugin that transforms :hover selectors to :active on devices where a mouse isn't the primary input mechanism.

a:hover {
    color: #f00;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    a:hover {
        color: #f00;
    }
}
@-moz-document url-prefix() {
    a:hover {
        color: #f00;
    }
}
@media (hover: hover) {
    a:hover {
        color: #f00;
    }
}
@media (hover: none) {
    a:active {
        color: #f00;
    }
}

This plugin correctly supports IE10+, Edge, Chrome 38+, Safari 9+ and Firefox desktop. In Firefox mobile, the :hover selector will still be applied to elements due to missing support of the @media (hover: none) query.

Usage

postcss([ require('postcss-mobile-hover') ])

See PostCSS docs for examples for your environment.