postcss-mobile-hover
v1.0.2
Published
PostCSS plugin that transforms :hover selectors to :active on devices where a mouse isn't the primary input mechanism
Downloads
1,472
Maintainers
Readme
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.