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

原创于 2014-06-10 22:16:27 发布 · 491 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

10 篇文章

订阅专栏

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

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

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

odiv2.onmouseover=odiv1.onmouseover=function(){
odiv2.style.display="block";
clearTimeout(setTimevar);
}
odiv2.onmouseout=odiv1.onmouseout=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>