css简易完成网络热点连接当电脑鼠标悬停时出現

2021-03-09 02:19 jianzhan
相近网络热点连接的1段小编码:运用精准定位完成。
这个仿佛是沒有甚么可多说的。
看过精准定位这个定义的,都能了解。

拷贝编码
编码以下:

<html>
<head>
<style>
*{margin:0px;padding:0px;}
body{text-align:center;}
.body{width:200px;height:auto;position:relative;text-align:left;margin:0 auto;}
.ourImg{width:200px;padding:3px;background:#eee;border:1px solid #aaa;height:auto;}
.body ul{list-style-type:none;}
.body a .hotspot{width:100px;height:150px;position:absolute;}
.body .MM a .hotspot{top:10px;left:15px;}
.body a .link{position:absolute;display:block;width:10em;right:⑴1em;cursor:pointer;}
.body .MM a .link{top:5px;color:#0066FF;}
.body a:hover .hotspot,.body a:focus .hotspot{border:1px solid #FFF;}
.body a:hover .link,.body a:focus .link{color:#0066FF;}
</style>
</head>
<body>
<div class = "body">
<img src = "img1.jpg" alt = "MM" class = "ourImg"/>
<ul>
<li class = "MM">
<a href = "#" title = "MM">
<span class = "hotspot"></span>
<span class = "link">MM</span>
</a>
</li>
</ul>
</div>
</body>
</html>

实际效果图以下:当电脑鼠标悬停到MM字样时,照片中就会出現1个白色的框