悬停对移动设备的影响

时间:2014-08-25 08:13:11

标签: html css hover mobile-devices

我对CSS悬停效果有疑问。我使用悬停导航来激活带有显示类的子菜单。在移动设备上我遇到了没有悬停的问题,所以我只能点击主菜单但看不到子菜单。有没有办法让这项工作在移动设备上运行?

2 个答案:

答案 0 :(得分:2)

在移动设备上,hover属性无用,因为用户必须用手指滚动页面,通过悬停(保持按下)它会触发其他设备选项。所以最好的解决方案是点击主菜单打开子菜单。

编辑(根据OP的要求):
http://jsfiddle.net/eyyuLs65/

编辑2:
http://jsfiddle.net/hp3hy96w/1/

答案 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();};
  }
}