纯css实现触发选择器
来源：互联网 发布：sql insert 单引号 编辑：程序博客网 时间：2024/06/07 01:43
原理：hover触发CSS临近选择器
所需工具：DW（用来给图片画热区），PS（算出弹出层的top和left偏移值）
Demo里画热区，你用鼠标悬停到上面即可看到效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片热区hover效果</title> <style> .main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 宽度与高度必须与背景大图一致 */ .bigImg {position: absolute; display: none; border: 1px solid #ccc;} .img1 {top: 199px; left: 153px;} .img2 {top: 369px; left: 552px;} .img3 {top: 411px; left: 632px;} .hotspot:hover + .bigImg {display: block;} </style></head><body> <div class="main-wrap"> <img src="bg.jpg" usemap="#Map"> <map name="Map"> <area class="hotspot" shape="rect" coords="152,117,232,190" href="#"> <img class="bigImg img1" src="cpu.png"> <area class="hotspot" shape="rect" coords="553,313,605,355" href="#"> <img class="bigImg img2" src="drive.png"> <area class="hotspot" shape="rect" coords="635,353,695,397" href="#"> <img class="bigImg img3" src="printer.png"> </map> </div></body></html> 0 0
- 纯css实现触发选择器
- 利用css的target选择器实现纯css相册
- 纯css实现三角
- 纯CSS实现斜角
- 纯CSS实现斜角
- 纯CSS实现checkbox
- 纯CSS实现三角形
- 纯CSS实现图片
- 纯CSS实现箭头
- 纯CSS实现圆角框
- 纯CSS实现Tooltip
- 纯Css实现三角形
- 纯css实现轮播图
- 纯css实现轮播图
- 纯CSS实现三角形
- JavaScript实现CSS选择器
- 纯CSS实现翻页效果
- 纯CSS实现下拉列表
- R 速学之篇二
- PHP关于二叉树的前序中序后序遍历操作
- c，c++中时间戳与标准时间间的相互转换
- jsp标准标签库
- JAVA动态代理用法与实现过程
- 纯css实现触发选择器
- 进程间通信笔记（1）—简介
- 整理笔记---Hiberante对象关系
- poj 3259 Bellman-ford + SPFA
- 自定义开关按钮
- JAVA单例MongoDB工具类
- Codeforces 702 B. Powers of Two（二分）
- chrome 调试anroid
- python中super()出现的TypeError: must be type, not classobj
