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

这将使用460px的媒体查询来将悬停样式设置为完全相同的颜色，就像它没有悬停一样（最终创建你想要做的事情）。

<强> DEMO JSFiddle

@media掌上电脑 - 没有悬停效果

1 个答案: