It's My Life

safari浏览器下hover失效的解决方法

07.26 学习记录评论👁️145


  safari浏览器下hover失效的解决方法
  
  如图,左上角的菜单,我是使用CSS的hover菜单实现的,但它在手机端的safari浏览器下失效,表现为:点击那三横线图标后,弹出了菜单,如果不点击菜单的话,弹出的菜单就不会再消失,点击空白处也无法消失。这样就无法达到效果,违背了平常的浏览习惯了。

  还是有办法解决的:

第一方法:使用JS绑定:

document.body.addEventListener('touchstart',function(){});

第二种方法:HTML添加

<body ontouchstart>

  这样就可以在safari浏览器下,点击图标,弹出菜单,点击空白处,即可关闭菜单,达到所要的效果。PC端是鼠标移动到图标上面,即弹出菜单,鼠标移开即消失。


扫描二维码,在手机上阅读!

🏷️ : css, 菜单, safari, 浏览器

⚜️

到处看看:

⚜️

说点啥?