css简单实现热点链接
来源:互联网 发布:制作台历的软件 编辑:程序博客网 时间:2024/06/08 10:24
类似热点链接的一段小代码:利用定位实现。
这个好像是没有什么可多说的。
看过定位这个概念的,都能理解。
<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字样时,图片中就会出现一个白色的框
- css简单实现热点链接
- css实现热点(hotspot,地图提示)
- css 热点
- css实现热点地图map,鼠标移到热点弹出层提示框
- 图片热点链接
- 图片热点链接
- 图片设置热点链接
- 简单的服务器 实现引用css、js和a链接可以跳转
- CSS-GroupBox简单实现
- 正点CSS实例--简单链接按钮
- 简单PPTP实现VPN链接
- 简单实现短链接算法
- 鼠标链接热点更换图片
- 纯CSS实现双击链接跳转功能
- 在Flex中,如何实现类似html中图片热点链接的效果呢?
- 简单下拉导航(css实现)
- 倒影效果简单css实现
- 用Delphi实现热点
- 差分约束系统
- Java中的数据类型
- typedef _packed struct _packed关键字的意思是在struct和union结构中不添加填充字节
- 前三范式概述
- springIOC总结
- css简单实现热点链接
- iSpirit网址
- 2-制作XPE镜像
- 痛苦并幸福着------源动力第一天
- 单片机如何串口发送数值,带小数点的。
- perl解析excel
- java dom4j操作xml
- Python基础03 序列
- cocos2d-X 节点(CCTouch.h)API