html中国地图设计

答案:1 悬赏:0 手机版

解决时间 2021-04-07 03:13

提问者网友：箛茗
2021-04-06 19:00

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

最佳答案

五星知识达人网友：空山清雨
2021-04-06 19:15

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

代码大概是这样子写

<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的位置就行了

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息