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

需求:鼠标移动到地图某区域,使其他区域的颜色改变;

实现:当鼠标移入某个区域(元素)时,改变其他位置的元素样式;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				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区域前:

移入后:

原文地址:https://www.cnblogs.com/Zdelta/p/14122334.html