Disable hover on mobile and tablet devices

Question

How to disable hover in mobile and tablet devices? The img tag is an SVG file.

scss file:

.menu-link:hover {
    img { filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%); }
    .sidebar-text-menu { 
        font-weight: bold;
        color:$blue; 
        opacity: 1;
    }
    i{
           filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%);
    }
}

May be this could help you https://stackoverflow.com/questions/26754497/css-disable-hover-effect/26755719, https://stackoverflow.com/questions/5069110/remove-hover-css-behavior-from-element. just set these solution in media qurie `@media only screen and (max-width: 600px) {}` — Awais, Dec 06 '19 at 04:24
Does this answer your question? [How to remove/ignore :hover css style on touch devices](https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices) — Akhi Akl, Dec 06 '19 at 09:46

score 1 · Answer 1 · answered Dec 06 '19 at 09:19

There's pretty good browser support for the @media queries hover and pointer. You can use those in a combination to get the effect you are looking for:

@media(hover: hover) and (pointer: fine) {
    .menu-link:hover {
        /* Targeting devices with mouse cursor and :hover */
    }
}

Targeting devices based on width will most likely include some mobile devices, which is not what you want in this case.

Disable hover on mobile and tablet devices

1 Answers1