//if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
    /* ... */
}

//if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
    /* ... */
}