在两个元素间实现"无缝"移动

最新推荐文章于 2021-02-03 11:31:42 发布

DB-Ruan

最新推荐文章于 2021-02-03 11:31:42 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 技术日志

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38915147

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术日志

23 篇文章 0 订阅

订阅专栏

即：从鼠标移到元素A，元素B显现。鼠标移出元素A，元素B消失。在元素A与元素B之间移动，元素B一直保持可见状态。

原理与步骤：

1：设置元素B的display属性为none；

2：用JS获得元素A和B，为元素AB分别添加鼠标移入移出事件。当鼠标移入元素A时，元素B的display属性改为BLOCK。当鼠标移出元素A时，开启一个setTImeout延时定时器，使元素B推迟消失。当鼠标移动到元素B元素时，清除定时器，并为元素B设置为BLOCK属性值。当鼠标移出元素B时，同时开启延迟定时器。如果再移到A的话，先清除定时器。

代码：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>移出移入</title>
		<style>
			#div1{width:300px; height:300px; background:red; position:absolute; top:0; left:0;}
			#div2{width:200px; height:200px; background:red; position:absolute; top:0; left:320px; display:none;}
		</style>
		<script>
			var timer;
			window.οnlοad=function(){
				oDiv1=document.getElementById("div1");
				oDiv2=document.getElementById("div2");
				oDiv1.οnmοuseοver=oDiv2.οnmοuseοver=function(){
					clearTimeout(timer);
					oDiv2.style.display="block";
				}
				oDiv1.οnmοuseοut=oDiv2.οnmοuseοut=function(){
					timer=setTimeout(function(){
						oDiv2.style.display="none";
					},500);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
<html>