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區域前:

移入後:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章