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

来源：互联网发布：写轮眼美瞳软件编辑：程序博客网时间：2024/06/16 04:39

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

刚刚做好前端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;}

地图图片：

0 0