问题：单击关闭按钮会使下方的移动菜单按钮处于悬停状态

Posted 2023-05-09

【中文标题】问题：单击关闭按钮会使下方的移动菜单按钮处于悬停状态

【英文标题】：Problem: Clicking close button leaves the underneath mobile menu button in its hover state

【发布时间】：2020-08-09 13:05:33

【问题描述】：

在移动视图（ios）中，fancybox 的关闭按钮与fancybox 下方的菜单按钮（向下滑动菜单）的位置完全相同。因此，当我单击fancybox 关闭按钮时，fancybox 会关闭，但之后，菜单按钮处于悬停状态（具有悬停状态的不需要的背景颜色）。为什么单击fancybox的关闭按钮会影响菜单按钮。 Fancybox 位于 html 代码上方...似乎单击 fancybox 关闭按钮与菜单按钮混合在一起。 （当然它只在 iOS 中，我知道在 iOS 中移除悬停状态问题。所以我猜这与“触摸”有关？）

我希望我能很好地描述我的问题 ;-) 谢谢！

【参考方案1】：

从您的描述中不清楚您的菜单按钮是否是触发元素（例如，单击该按钮会启动 fancybox）。如果是这样，那么您的按钮很可能在关闭fancybox 后默认获得焦点。您可以使用backFocus 选项禁用该功能。

但是，如果您的按钮不是触发元素，那么可能的解决方法：

1) 将关闭按钮移到另一侧； 2）使用@media (hover: hover) 避免在移动设备上设置悬停状态（见https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover#Example）

【讨论】：

嗨，Janis，再次感谢您这么快的回复 - 非常棒的支持！实际上，它已被触发，因此您的解决方案 2) 完美运行！对我来说是新的:) 竖起大拇指！大帮助！！谢了！！