A PostCSS plugin that wraps :hover selectors with @media (any-hover: hover) {}.
The hover effect should be disabled on touch devices as it can cause the hover state to persist after a tap, resulting in unexpected UI behavior and a confusing user experience.
Wrap with @media (any-hover: hover) {} to apply the :hover effect only on hoverable devices.
/* before */
.foo:hover {
color: red;
}
/* after */
@media (any-hover: hover) {
.foo:hover {
color: red;
}
}Type: Boolean Default: false
You may want to apply the same style to :focus-visible as you do to :hover to clearly indicate which element is focused during keyboard navigation.
When using the alsoApplyToFocusVisible option, the styles defined for :hover will also be applied to :focus-visible.
/* before */
.foo:hover {
color: red;
}
/* after */
.foo:focus-visible {
color: red;
}
@media (any-hover: hover) {
.foo:hover {
color: red;
}
}