*{
margin: 0;
padding: 0;
font-size: 12px;
}
#wrap{
width: 1386px;
height: 1014px;
margin:20px auto auto auto;
}
.map{
width: 100%;
height: 100%;
background: url(../images/tz.jpg) repeat-x;
float: top;
position:relative
}
a{
height:23px; line-height:23px; display:block; color:#F3F3F3; text-align:center; text-decoration: none;font-weight:bold;
}
span{
position:relative; top:-60px; left:-40px;width:100px; height:30px ;font-size:14px; background-color:#D0D0D0; color:#000000; text-align:center;line-height:30px;border-radius:10px;border: 2px solid #000000;
display: none;
}
.A1 a:link,.A2 a:link,.A3 a:link,.A4 a:link,.A5 a:link,.A6 a:link,.A7 a:link,.A8 a:link,.A9 a:link,.A10 a:link,.A11 a:link ,.A12 a:link,.A13 a:link,.A14 a:link,.A15 a:link,.A16 a:link,.A17 a:link,.A18 a:link,.A19 a:link,.A20 a:link,.A21 a:link,.A22 a:link,.A23 a:link{
width:20px; height:20px; background-color:#FF8000; border-radius:23px; border:3px solid #FFFFFF;
position: absolute;
}
.A1 a:visited,.A2 a:visited,.A3 a:visited,.A4 a:visited,.A5 a:visited,.A6 a:visited,.A7 a:visited,.A8 a:visited,.A9 a:visited,.A10 a:visited,.A11 a:visited ,.A12 a:visited,.A13 a:visited,.A14 a:visited,.A15 a:visited,.A16 a:visited,.A17 a:visited,.A18 a:visited,.A19 a:visited,.A20 a:visited,.A21 a:visited,.A22 a:visited,.A23 a:visited{
width:20px; height:20px; background-color:#8E8E8E; border-radius:23px;border:3px solid #FFFFFF;
position: absolute;
}
.A1 a:hover,.A2 a:hover,.A3 a:hover,.A4 a:hover,.A5 a:hover,.A6 a:hover,.A7 a:hover,.A8 a:hover,.A9 a:hover,.A10 a:hover,.A11 a:hover ,.A12 a:hover,.A13 a:hover,.A14 a:hover,.A15 a:hover,.A16 a:hover,.A17 a:hover,.A18 a:hover,.A19 a:hover,.A20 a:hover,.A21 a:hover,.A22 a:hover,.A23 a:hover{
width:20px; height:20px; background-color:#4A4AFF; border-radius:23px;border:3px solid #FFFFFF;
position: absolute;
}
a:hover span{
display: block;
}
.A1 a:link{
margin: 250px 0px 0px 63px;
}
.A2 a:link{
margin: 82px 0px 0px 268px;
}
.A3 a:link{
margin: 180px 0px 0px 235px;
}
.A4 a:link{
margin: 300px 0px 0px 235px;
}
.A5 a:link{
margin: 470px 0px 0px 235px;
}
.A6 a:link{
margin: 163px 0px 0px 442px;
}
.A7 a:link{
margin: 220px 0px 0px 442px;
}
.A8 a:link{
margin: 234px 0px 0px 585px;
}
.A9 a:link{
margin: 310px 0px 0px 510px;
}
.A10 a:link{
margin: 470px 0px 0px 460px;
}
.A11 a:link{
margin: 168px 0px 0px 756px;
}
.A12 a:link{
margin: 289px 0px 0px 704px;
}
.A13 a:link{
margin: 438px 0px 0px 663px;
}
.A14 a:link{
margin: 556px 0px 0px 663px;
}
.A15 a:link{
margin: 417px 0px 0px 874px;
}
.A16 a:link{
margin: 570px 0px 0px 912px;
}
.A17 a:link{
margin: 0px 0px 0px 0px;
}
.A18 a:link{
margin: 144px 0px 0px 1015px;
}
.A19 a:link{
margin: 367px 0px 0px 1142px;
}
.A20 a:link{
margin: 67px 0px 0px 668px;
}
.A21 a:link{
margin: 385px 0px 0px 580px;
}
.A22 a:link{
margin: 385px 0px 0px 630px;
}
.A23 a:link{
margin: 385px 0px 0px 690px;
}
备注：Map是个大div，一张地图图片。里面的建筑是小div，A1到A23.我用css画成了个小圆标在了map上，一共23个圆
最后位置只写a：link，不写visited和hover可以吗？为什么 “ .办公大楼 a:link” 这种不带 “a:link” 会导致整体错位？
另外请问，如何实现当鼠标移到一个div里面li的a链接时改变另一个div的样式。
谢谢
淡雅的默
杰伦窗外的小麻雀
xdlumia
不拘艺格