2

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%);
    }
}
Kevin
  • 315
  • 2
  • 5
  • 19
  • 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

1 Answers1

4

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.

Cody MacPixelface
  • 1,348
  • 10
  • 21
  • 1
    Great answer Cody! Alternatively, if like me you code desktop first and often find you need to revert or change some styles for mobile when hover is not available - I do a `@media only screen and (hover: none) and (pointer: coarse) { }`. The `only screen` is not essential here I just add it as good practice. – Lushawn Jul 05 '22 at 10:55