Question

html中国地图设计

请问哪位大神知道如何实现图片的“鼠标移至图片上显示遮罩层及文字”吗？就是我想设计一个地图 上面放一些城市，乍一看只有城市名和点，但是当鼠标移到这个城市的点上就出现一些朋友的信息 （一行一行排列，比如第一行是张三 北京大学 ××路 133×××××××× 第二行是李四..............类似于表格 ） 就是这个效果 请问能行不？求大神指教

Answer 1

以前有看到类似的，一般的做法是首先放一张地图，然后放一些类似于图钉之类的小图标，利用相对定位把他定到你要放的省份或者城市那里，当鼠标移动到这些小图标就显示出隐藏的内容。

代码大概是这样子写

<div id="ditu">
        <li><span></span><div class="yin">广东张三135XXXXXXXX</div></li>
        <li><span></span><div class="yin">北京李四138XXXXXXXX</div></li>
        <li><span></span><div class="yin">上海王五139XXXXXXXX</div></li>
</div>

<style>
#ditu{position:relative;width:1000px;height:1000px;background:url('ditu.jpg') no-repeat;}
#ditu li{position:absolute;}
#ditu li span{bakcground:url('tubiao.jpg') no-repeat;}
#ditu li .yin{display:none;}
#ditu li:hover .yin{display:block;}
</style>

代码就是这样，然后用nth:child()来定义每一个li的位置就行了