鼠标移动太快，mouseout事件不触发解决方案

最新推荐文章于 2025-06-02 13:01:04 发布

原创最新推荐文章于 2025-06-02 13:01:04 发布 · 8.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #border #xhtml #html

Javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

div+css

6 篇文章

订阅专栏

本文介绍了一个简单的网页设计案例，通过HTML与JavaScript实现鼠标悬停时显示隐藏层的效果。该案例展示了如何使用HTML来构建页面结构，并利用JavaScript来控制元素的显示与隐藏状态，实现了良好的交互体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        function over()
        { document.getElementById("div1").style.display = "";}
        function out()
        { document.getElementById("div1").style.display = "none"; }
        function out1(ev)
        { ev = ev || window.event; var obj = ev.toElement || ev.relatedTarget;if (obj.id != "div1") out(); }
    </script>
</head>
<body>
    <a href="#" onmouseover="over()" onmouseout="out1(event)" style=" border:solid 1px red;">
        111111111111111111111111111111111111</a>
    <div id="div1" onmouseout="out()" style="height: 300px; width: 300px; border: solid 1px red; display: none;">
    </div>
</body>
</html>