@notainc/mouse-hover-visible

mouse hover visible

This library allows you to show CSS :hover pseudo-class only when triggered by the mouse.

There are several ways to achieve this goal. Advantages of our aproach are:

• Works on the device that has both mouse and touch screen.
• Write CSS (& Sass) cleanly among other pseudo-classes like :active or :focus.
• Hide the hover style automatically when the keyboard is pressed.

Install

$ npm install @notainc/mouse-hover-visible

How to use

Just import/require this library to your project.

import '@notainc/mouse-hover-visible'

It sets data-hover-visible attribute on the body element when the pointer is moved using the mouse. So you can apply the style as follows:

[data-hover-visible] button:hover {
  background-color: #ccc;
}

You can also use it in Sass:

.foo-component {
  background-color: #fff;

  &:active,
  &:focus,
  [data-hover-visible] &:hover {
    background-color: #ccc;
  }
}

Demo

See the live demo here

Compatibility

Suports ordinary modern dekstop browsers (Chrome, Firefox, Safari, Opera, Edge) and mobile browsers (Chrome for Android, iOS Safari)

Does not throw error on IE.

License

This software is released under the MIT License, see LICENSE.