我对CSS悬停效果有疑问。我使用悬停导航来激活带有显示类的子菜单。在移动设备上我遇到了没有悬停的问题,所以我只能点击主菜单但看不到子菜单。有没有办法让这项工作在移动设备上运行?
答案 0 :(得分:2)
在移动设备上,hover
属性无用,因为用户必须用手指滚动页面,通过悬停(保持按下)它会触发其他设备选项。所以最好的解决方案是点击主菜单打开子菜单。
编辑(根据OP的要求):
http://jsfiddle.net/eyyuLs65/
答案 1 :(得分:0)
我使用ontouchstart事件触发一个mouseenter事件,因此将其细化为伪类:hover事件。
我将其用于工具提示,以便在移动设备上工作。
在以下示例中,我为所有具有w3-tooltip类的HTML集合添加了一个事件处理程序
// On mobile devices the ontouchstart event exists,
// so we get it to trigger a mouseenter event, hence a :hover() event
function misc_mobileSetup() {
var list = document.getElementsByClassName("w3-tooltip");
for (var i in list) {
list[i].ontouchstart = function() {list[i].mouseenter();};
}
}