css - @media handheld - 没有悬停效果

Question

对于当前的元素，我正在尝试移除带有触摸屏的设备上的悬停效果。我的计划是使用 @media handheld {/* non-hover styles here */}，将我的 css 文件中包含 :hover 的所有内容粘贴到此处，然后删除所有悬停效果。

例子:

/* desktop */

a.my_element {
color : #ff0000;
}
a.my_element:hover {
color : #000000;
}

/* handheld devices */

@media handheld {
a.my_element:hover {
}
}

我的逻辑正确吗？这行得通吗？

Answer 1

尝试以下操作:

HTML

<a href="#" class="my_element"> example </a>

CSS

a.my_element {
color : #ff0000;
}
a.my_element:hover {
color : #000000;
}

/* handheld devices */

@media (max-width: 480px){
    a.my_element:hover {
        color: #ff0000;           
    }
}

这几乎会使用 460 像素的媒体查询来将悬停样式设置为与未悬停时完全相同的颜色(最终创建您想要的效果)。

DEMO JSFiddle