[c.y.j]练习div显示

最新推荐文章于 2025-04-19 17:05:47 发布

caoyongjunjava

最新推荐文章于 2025-04-19 17:05:47 发布

阅读量477

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/caoyongjunjava/article/details/29916747

版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，通过鼠标悬停事件来显示和隐藏HTML元素。利用setTimeout实现延迟隐藏效果，适用于创建导航菜单或提示框等交互元素。

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>javascript</title>
<script type="text/javascript">

window.οnlοad=function(){
var odiv1=document.getElementById("div1");
var odiv2=document.getElementById("div2");
var setTimevar=null;

odiv2.οnmοuseοver=odiv1.οnmοuseοver=function(){
odiv2.style.display="block";
clearTimeout(setTimevar);
}
odiv2.οnmοuseοut=odiv1.οnmοuseοut=function(){
setTimevar=setTimeout(function(){
odiv2.style.display="none";
},1000);
}

};

</script>
</head>

<body>
<div id="div1" style="background:#C00 ; height:100px; width:100px">
</div><br/>
<div id="div2" style="background:#0F3 ; height:100px; width:100px;display:none;">
</div>

</body>
</html>