zoukankan      html  css  js  c++  java
  • 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区域前:

    移入后:

  • 相关阅读:
    目录
    DRF的分页
    Django Rest Framework 视图和路由
    爬虫基本原理
    C# System.Threading.Timer的使用
    C# Task的使用
    C# 线程池的使用
    C# 异步委托回调函数使用
    C#异步委托等待句柄的使用
    C# 异步委托的使用
  • 原文地址:https://www.cnblogs.com/Zdelta/p/14122334.html
Copyright © 2011-2022 走看看