我给网站导航加了浮窗菜单，为啥鼠标一往下滑它就闪没、点都点不到？？？

我给网站导航加了浮窗菜单，为啥鼠标一往下滑它就闪没、点都点不到？？？

浮窗弹出来明明好好的，我手往下滑 1 秒，结果它整块闪没了。那天我在自己一个独立站上，把鼠标移到导航的「Products」上，下面弹出一个挺大的商品浮窗，两排卡片，挺好看。可我想点其中一个，它当场就没了。

↑ 修复前：斜着滑浮窗就闪没；修复后：同样的滑动，稳稳点到（脱敏演示）

我一开始以为是浏览器抽风，刷新、换设备都试了，毛病照旧。后来慢慢试出点门道：只有鼠标笔直往正下方那一小条滑，浮窗才不关；稍微往左右斜一点去够商品，它立刻就没。判定范围是不是太窄了？

这类「浮窗一滑就没」的毛病，光在代码里盯着「元素在不在」是查不出来的。得用浏览器，按鼠标真实落点一个位置一个位置去试。下面是我当时怎么找到那条缝的。

先把现象说具体

浮窗菜单（mega-menu，就是鼠标移上去往下展开的那种大面板），正常逻辑很简单：鼠标在菜单项上它就开，移开就关。

我盯着屏幕来回试，规律慢慢清楚了：从「Products」文字正下方那一小条往下滑，能进浮窗；只要往斜方向去够商品，半路就关。所以问题不在浮窗本身，在「从文字到浮窗」这段路上。直着走没事，斜着走必断。

光看 DOM 查不出来，得按真实坐标一个点一个点试

我没急着改代码。先打开浏览器把浮窗强行展开，写了一小段脚本，沿着面板从上到下、在不同的横向位置，挨个坐标去问浏览器：这个点，鼠标落上去算碰到了谁？

这一步是关键。查这种 bug 最容易掉的坑，是只在 DOM（页面的元素结构树）里看「浮窗这个节点在不在、显不显示」。它明明在，于是就卡住了。可鼠标不认 DOM，只认屏幕坐标落在哪个元素上。元素在 DOM 里待着，不等于你鼠标停的那个像素就能碰到它。

结果一跑出来，根因就清楚了：

文字底部到浮窗顶部之间，夹着一条大约 11 像素高的透明空白带。鼠标一滑进这条带，浏览器就判定你「离开了菜单」，立刻关。

为啥会有这条空白带

我量了一下：导航文字这一行只有 52 像素高，整条顶栏却有 74 像素高，文字垂直居中放，上下各空出约 11 像素的内边距。而浮窗的「可点击范围」，是从顶栏最底部才开始算的。

中间那 11 像素，主题原本只在「Products」文字正下方搭了一座桥补着，可这座桥只有文字那么宽，约 98 像素。浮窗本身横跨大半个屏幕，商品卡片散在整条宽度上。

这就好比两栋楼之间有条缝，工人只在正门那一小段搭了块木板。你正对着门走能过去，想斜着抄近路去隔壁，一脚就踩进缝里。直着滑能进，斜着够商品必踩空。我之前说的「判定范围太窄」，方向是对的，只是那座桥窄得只剩文字宽。

一行样式，把判定区域铺满整条宽度

修法不复杂：用一行 CSS（也就是控制网页长相的样式代码），把浮窗「可点击范围」的顶部往上抬，抬到导航文字行的下沿，正好盖住那条空白带。浮窗是整条屏幕宽的，这么一抬，整条宽度上的缝就都补上了。

我先在浏览器里把这行样式注进去试，再沿同样的坐标重新扫一遍：

• 偏左、偏右、正下方，那条空白带全没了，斜着滑也能顺进浮窗；
• 商品卡片照常能点；
• 只在浮窗打开时才生效，盖住的也只是顶栏最底那条空白。Logo、搜索、购物车、其它导航项都在更靠上的位置，照样点得到、切得动。

中间还卡了个小插曲。样式注进去怎么试都不生效，搞了半天才发现，浮窗展开有个 0.36 秒的过渡动画，在浏览器里它的优先级比我写死的样式还高，把我的改动直接盖住了。等动画跑完才轮到我的样式。为这点白折腾了好几分钟。

这次更值钱的是定位方法，不是那行 CSS

1. 先把现象描述具体。「直着滑没事斜着滑必关」这一句，就把范围从「浮窗坏了」缩到了「文字和浮窗之间有缝」。说得越具体，根因冒得越快。
2. 别在 DOM 里查元素在不在，那个会骗人。按真实坐标挨个去问浏览器碰到了谁，盲区在哪一下就出来。
3. 改完别只信代码。我就被那个 0.36 秒的动画坑过，以为样式生效了，其实被它压在底下。

「鼠标够不到浮窗」这类毛病，多半都是触发区和浮窗中间有段没接上的空白。下回再碰上，先别急着怀疑浮窗，量一量它俩之间那条缝。