CSS实现鼠标覆盖地图省名放大效果

最新推荐文章于 2022-03-05 15:12:37 发布

voldem_rt

最新推荐文章于 2022-03-05 15:12:37 发布

阅读量533

点赞数

文章标签：地图 css 前端

本文链接：https://blog.csdn.net/voldem/article/details/45619707

版权

Web学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

DIV+CSS布局

2 篇文章 0 订阅

订阅专栏

最近做通过地图点击省份，通过下拉菜单选择年份，得到省份名+年份，然后通过数据库得到该省，该年的数据

刚刚做好前端HTML和CSS,效果还行，但是遇到以下几点问题：

1、如果使鼠标覆盖的DIV显示在最上层，现在代码会出现如下图问题：

（当鼠标覆盖后，该省名DIV有放大效果，颜色改变，但是不能显示在最层，会被其他没有覆盖效果的DIV遮挡）

解决：在CSS中加入：z-index:99; z-index 属性设置元素的堆叠顺序，其作用是，z-index即为该层在鼠标覆盖后，显示的优先级别，数字越大优先级越高

注意Z-index 仅能在定位元素上奏效，解决时间：6月23日。

2、如何在点击后，得到该省名，然后传给后台，同时跳转到该省，该年的数据展示页

3、怎样通过CSS或者简单的JS，实现整个省份不规则区域的颜色改变

以下是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="box">
    <img src="map.jpg" border="0"/>
        <a href="#"><div id="a1" class="sbox" title="新疆">新疆</div></a>
        
        <a href="#"><div id="a2" class="sbox" title="西藏">西藏</div></a>
        
        <a href="#"><div id="a3" class="sbox" title="青海">青海</div></a>
        
        <a href="#"><div id="a4" class="sbox" title="甘肃">甘肃</div></a>
        
        <a href="#"><div id="a5" class="sbox" title="内蒙古">内蒙古</div></a>
        
        <a href="#"><div id="a6" class="sbox" title="海南">海南</div></a>
        
        <a href="#"><div id="a7" class="sbox" title="云南">云南</div></a>
        
        <a href="#"><div id="a8" class="sbox" title="四川">四川</div></a>
        
        <a href="#"><div id="a9" class="sbox" title="重庆">重庆</div></a>
        
        <a href="#"><div id="a10" class="sbox" title="上海">上海</div></a>
        
        <a href="#"><div id="a11" class="sbox" title="台湾">台湾</div></a>
        
        <a href="#"><div id="a12" class="sbox" title="香港">香港</div></a>
        
        <a href="#"><div id="a13" class="sbox" title="澳门">澳门</div></a>
        
        <a href="#"><div id="a14" class="sbox" title="宁夏">宁夏</div></a>
        
        <a href="#"><div id="a15" class="sbox" title="辽宁">辽宁</div></a>
        
        <a href="#"><div id="a16" class="sbox" title="江苏">江苏</div></a>
        
        <a href="#"><div id="a17" class="sbox" title="天津">天津</div></a>
        
        <a href="#"><div id="a18" class="sbox" title="北京">北京</div></a>
        
        <a href="#"><div id="a19" class="sbox" title="河北">河北</div></a>
        
        <a href="#"><div id="a20" class="sbox" title="山东">山东</div></a>
        
        <a href="#"><div id="a21" class="sbox" title="安徽">安徽</div></a>
        
        <a href="#"><div id="a22" class="sbox" title="河南">河南</div></a>
        
        <a href="#"><div id="a23" class="sbox" title="陕西">陕西</div></a>
        
        <a href="#"><div id="a24" class="sbox" title="湖北">湖北</div></a>
        
        <a href="#"><div id="a25" class="sbox" title="山西">山西</div></a>
        
        <a href="#"><div id="a26" class="sbox" title="湖南">湖南</div></a>
        
        <a href="#"><div id="a27" class="sbox" title="贵州">贵州</div></a>
        
        <a href="#"><div id="a28" class="sbox" title="广西">广西</div></a>
        
        <a href="#"><div id="a29" class="sbox" title="广东">广东</div></a>
        
        <a href="#"><div id="a30" class="sbox" title="福建">福建</div></a>
        
        <a href="#"> <div id="a31" class="sbox" title="江西">江西</div></a>
        
        <a href="#"><div id="a32" class="sbox" title="浙江">浙江</div></a>
        
        <a href="#"><div id="a33" class="sbox" title="黑龙江">黑龙江</div></a>
        
        <a href="#"><div id="a34" class="sbox" title="吉林">吉林</div></a>

</div>
</body>
</html>

以下是CSS：

a :hover {
  background:#FFF; color:#000;/*鼠标覆盖后背景和字的颜色*/
  -webkit-transform: scale(1.3);/*CSS3放大效果*/
  -moz-transform:scale(1.3)
  transform: scale(1.3);
}
#box{
    position:relative;/*作为各小块参照的父元素*/       
}
.sbox{
	width:50px;
	height:26px;
	position:absolute;
	text-align:center;
	border-radius:5px;/*CSS3处理圆角*/
	background:#6AE1FF;/*鼠标覆盖前背景和字的颜色*/
}
/*各个小块位置*/
#a1{
	margin-top:73px;
	margin-left:98px;
	left: -26px;
	top: 22px;
}
#a2{
	margin-top:73px;
	margin-left:98px;
	left: -35px;
	top: 127px;
}
#a3{
	margin-top:73px;
	margin-left:98px;
	left: 47px;
	top: 92px;
}
#a4{
	margin-top:73px;
	margin-left:98px;
	left: 75px;
	top: 56px;
}
#a5{
	width:65px;
	margin-top:73px;
	margin-left:98px;
	left: 147px;
	top: 51px;
}
#a6{
	margin-top:73px;
	margin-left:98px;
	left: 138px;
	top: 274px;
}
#a7{
	margin-top:73px;
	margin-left:98px;
	left: 84px;
	top: 219px;
}
#a8{
	margin-top:73px;
	margin-left:98px;
	left: 92px;
	top: 145px;
}
#a9{
	margin-top:73px;
	margin-left:98px;
	left: 138px;
	top: 164px;
}
#a10{
	margin-top:73px;
	margin-left:98px;
	left: 290px;
	top: 144px;
}
#a11{
	margin-top:73px;
	margin-left:98px;
	left: 299px;
	top: 231px;
}
#a12{
	margin-top:73px;
	margin-left:98px;
	left: 251px;
	top: 242px;
}
#a13{
	margin-top:73px;
	margin-left:98px;
    left: 201px;
	top: 248px;
}
#a14{
	margin-top:73px;
	margin-left:98px;
	left: 133px;
	top: 87px;
}
#a15{
	margin-top:73px;
	margin-left:98px;
	left: 281px;
	top: 37px;
}
#a16{
	margin-top:73px;
	margin-left:98px;
	left: 256px;
	top: 119px;
}
#a17{
	margin-top:73px;
	margin-left:98px;
	left: 275px;
	top: 62px;
}
#a18{
	margin-top:73px;
	margin-left:98px;
	left: 228px;
	top: 42px;
}
#a19{
	margin-top:73px;
	margin-left:98px;
	left: 222px;
	top: 67px;
}
#a20{
	margin-top:73px;
	margin-left:98px;
	left: 242px;
	top: 94px;
}
#a21{
	margin-top:73px;
	margin-left:98px;
	left: 239px;
	top: 144px;
}
#a22{
	margin-top:73px;
	margin-left:98px;
	left: 203px;
	top: 121px;
}
#a23{
	margin-top:73px;
	margin-left:98px;
	left: 154px;
	top: 118px;
}
#a24{
	margin-top:73px;
	margin-left:98px;
	left: 188px;
	top: 148px;
}

#a25{
	margin-top:73px;
	margin-left:98px;
	left: 188px;
	top: 87px;
}

#a26{
	margin-top:73px;
	margin-left:98px;
	left: 178px;
	top: 185px;
}

#a27{
	margin-top:73px;
	margin-left:98px;
	left: 134px;
	top: 197px;
}
#a28{
	margin-top:73px;
	margin-left:98px;
	left: 154px;
	top: 227px;
}
#a29{
	margin-top:73px;
	margin-left:98px;
	left: 207px;
	top: 223px;
}
#a30{
	margin-top:73px;
	margin-left:98px;
	left: 252px;
	top: 202px;
}
#a31{
	margin-top:73px;
	margin-left:98px;
	left: 226px;
	top: 178px;
}
#a32{
	margin-top:73px;
	margin-left:98px;
	left: 276px;
	top: 171px;
}
#a33{
	width:65px;
	margin-top:73px;
	margin-left:98px;
	left: 299px;
	top: -24px;
}
#a34{
	margin-top:73px;
	margin-left:98px;
	left: 299px;
	top: 11px;
}

地图图片：