需求:鼠标移动到地图某区域,使其他区域的颜色改变;
实现:当鼠标移入某个区域(元素)时,改变其他位置的元素样式;
<!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区域前:
移入后: