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%);
    }
}

Answer 1

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.