@媒体手持-无悬停效应

Question

对于当前的一个项目，我试图消除悬停在设备上的触摸屏。我的计划是使用@media handheld { /* non-hover styles here */ }，在这里粘贴包含:hover的css文件中的所有内容，然后删除所有悬停效果。

示例：

/* 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 do上的媒体查询将悬停的样式设置为完全相同的颜色，就好像它没有悬停一样(最终创建了您想要做的事情)。

演示JSFiddle