KandZ – Tuts

We like to help…!

CSS 37 💻 hover and inverted colors media features

a - hover media feature
hover media feature applies styles when a pointing device can hover oven an element
It is useful when certain elements have to change appearance on pointing device hover
and it ensues that the hover effect will be applied only if the user can hover an element
values: none → cannot hover like mobile devices
hover → the input device can hover over an element
@media (hover: hover) → applies style when hover is detected

b - inverted-colors media feature
inverted-colors media feature applies styles when the system's display used an inverted color scheme
That means that dark colors are displayed in bright colors and vice versa
It helps to make your content readable when inverted colors are enables due to poor visibility condition
values: none → colors are displayed normally
inverted → display uses inverted color scheme
@media (inverted-colors: inverted) → applies style when inverted colors are detected

Leave a Reply