JS触发某元素周围元素的样式改变

需求：鼠标移动到地图某区域，使其他区域的颜色改变；

实现：当鼠标移入某个区域（元素）时，改变其他位置的元素样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width:200px;height:200px; background-color:#00FF00;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p id="p2">2</p>
		<p >3</p>
		
	</body>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<script>
		$("#p2").bind("mouseenter",function(){
                    //这里直接取像素位置，实用需要计算具体位置
		  var topEle=document.elementFromPoint(100,100);
		  console.log(topEle);
		  var bottomEle=document.elementFromPoint(100,500);
		  
		  console.log(bottomEle);
		  
		  $(topEle).css("background-color", "blue");
		  $(bottomEle).css("background-color", "blue");
		});
		
	</script>
</html>

效果：

鼠标移入2区域前：

移入后：

posted @ 2019-12-05 16:07  Zdelta  阅读(33)  评论(0)  编辑  收藏  举报