简短的 mouseover 显示与隐藏层的办法

最新推荐文章于 2022-09-08 20:12:21 发布

原创最新推荐文章于 2022-09-08 20:12:21 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #layer #扩展

0 1 人生专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决mouseover层在鼠标悬停时因内部对象触发mouseout事件而导致层消失的问题的方法。通过设置延时和状态记录的方式，确保了mouseover层的稳定显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在制作 mouseover 和 mouseout 显示/隐藏层的时候,有时总会出现 mouseover 层里面的对象时,层消失的情况,这是因为mouseover 层内
对象时,会对前层产生两个事件:先mouseout、再mouseover,如果我们直接把层的隐藏控制放在onmouseout 事件上时,控制就会出错,可
以使用 setTimeout 的延时特性来跳过这类事件的影响。
示例代码如下:
<div onmouseover=“document.all['pQryType'].style.display='block';document.body.onclick='document.all[/'pQryType/'].style.display=/'none/';';”>显示触点</div>

<div style=“position:absolute;left:0px;top:3px;overflow:auto;border:1px solid black;background-color:lightyellow;display:none” id=“pQryType”
onmouseout=“this.ovThis=1; setTimeout('if(document.all[/'pQryType/'].ovThis==1){document.all[/'pQryType/'].style.display=/'none/';}',500);”
onmouseover=“this.ovThis=0” ovThis=0>Mouse over Layer Info</div>

中间,我设了一个 ovThis=0 扩展属性来作为mouseover 状态记录,然后使用延时0.5 秒检查 mouseover状态的方式来隐藏 id="pQryType"
这个层。