css简单实现热点链接当鼠标悬停时出现白色的框_ Div+Css教程-查字典教程网
css简单实现热点链接当鼠标悬停时出现白色的框
css简单实现热点链接当鼠标悬停时出现白色的框
发布时间:2017-01-07 来源:查字典编辑
摘要:类似热点链接的一段小代码:利用定位实现。这个好像是没有什么可多说的。看过定位这个概念的,都能理解。*{margin:0px;padding:...

类似热点链接的一段小代码:利用定位实现。

这个好像是没有什么可多说的。

看过定位这个概念的,都能理解。

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类