鼠标悬浮div同步显示

最新推荐文章于 2023-05-27 12:00:35 发布

原创最新推荐文章于 2023-05-27 12:00:35 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

前端特效专栏收录该内容

10 篇文章

订阅专栏

该博客探讨了如何在鼠标悬浮到div1上时同步显示div2信息层，且当鼠标在div2上时保持其可见。文章提到了两种方法，其中方法1成功实现了需求，而方法2存在一个问题：当div2包含标签内容时，鼠标经过这些标签会导致信息层意外隐藏。

鼠标悬浮在div1标签上时，显示对应的div2信息层,同时鼠标在div2信息层上时，div2不隐藏。只有离开div1或者div2时，隐藏div2信息层
1、div1和div2之间不能有空隙

1、方法1（完成）

<style type="text/css">
.div1{
	width: 100px;
	height: 100px;
	background: red;
}
.div2{
	width: 300px;
	height: 300px;
	background: yellow;
	display: none;
}
.div2 span{
	
}
</style>

<div class="div1"></div>
<div class="div2">
	<span>内容内容内</span>
</div>

var btn = document.querySelector(".div1");
var box = document.querySelector(".div2");
var timer = null; 
box.onmouseover = btn.onmouseover = function(){
  if(timer) clearTimeout(timer)
    box.style.display = 'block';
}
box.onmouseout = btn.onmouseout = function(){
  timer = setTimeout(function(){
    box.style.display = 'none';
  },400);
		 
}

2、方法2（有缺陷）

缺陷：当div2有标签内容时，鼠标经过标签会出发隐藏事件

$('.div1').mouseover(function(){
$('.div2').show()
})

$('.div1').mouseout(function(e){ 
	 var x = e.pageX;
	 var y = e.pageY; 
	 //x的值相对于文档的左边缘。y的值相对于文档的上边缘
	 //x,y是全局变量;
	 //判断鼠标是否在某DIV中
	 var div = $('.div2');//获取你想要的DIV
	 var y1 = div.offset().top;  //div上面两个的点的y值
	 var y2 = y1 + div.height();//div下面两个点的y值
	 var x1 = div.offset().left;  //div左边两个的点的x值
	 var x2 = x1 + div.width();  //div右边两个点的x的值
	  
	 if( x < x1 || x > x2 || y < y1 || y > y2){
		 // alert('鼠标不在该DIV中');
		 
	 	$('.div2').hide()
	 }else{
	 	$('.div2').show()
		// alert("23")
	 }
});
$('.div2').mouseout(function(){
	// e.stopPropagation();
	 $('.div2').hide()
})