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

最新推荐文章于 2022-03-21 23:54:28 发布

Zdelta

最新推荐文章于 2022-03-21 23:54:28 发布

阅读量281

点赞数

分类专栏：前端文章标签： js javascript 地图色块

本文链接：https://blog.csdn.net/Zdelta/article/details/103406660

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

<!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区域前：

移入后：

Zdelta

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS触发某元素周围元素的样式改变

需求：鼠标移动到地图某区域，使其他区域的颜色改变；实现：当鼠标移入某个区域（元素）时，改变其他位置的元素样式；<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&gt...
复制链接

扫一扫

专栏目录