css简单实现热点链接当鼠标悬停时出现白色的框

前端技术 2023/09/09 CSS
类似热点链接的一段小代码：利用定位实现。
这个好像是没有什么可多说的。
看过定位这个概念的，都能理解。

复制代码
代码如下:

<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:-11em;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字样时，图片中就会出现一个白色的框

本文地址：https://www.stayed.cn/item/25102

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案