Question

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

Answer 1

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

编辑（根据OP的要求）：
http://jsfiddle.net/eyyuLs65/

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

Answer 2

我使用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();};
  }
}

悬停对移动设备的影响

2 个答案: