需求:鼠標移動到地圖某區域,使其他區域的顏色改變;
實現:當鼠標移入某個區域(元素)時,改變其他位置的元素樣式;
<!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區域前:
移入後: