css远距离链接
2024-10-16 05:00:49
远距离链接主要运用了hover伪类,但是运用了两次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 远距离链接,核心思路是a内部定义两个span,并进行绝对定位。当鼠标经过a链接,两个span同时有变化 */ .r { width: 330px; height: 550px; position: relative; } .r ul { padding: 0; margin: 0; list-style: none; } .r ul a { display: block; text-decoration: none; } /* 让span撑开a的大小 */ .r ul .box { position: absolute; width: 50px; height: 60px; } .r .wang .box { top: 30px; left: 20px; border: 1px solid transparent; } .r .hong .box { top: 80px; left: 50px; border: 1px solid transparent; } .r .ming .box { top: 200px; left: 90px; border: 1px solid transparent; } /* link绝对定位,排开链接 */ .r ul .link { position: absolute; right: -13em; width: 10em; } .r .wang .link { top: 0; } .r .hong .link { top: 2em; } .r .ming .link { top: 4em; } /* 鼠标经过效果切换 */ .r a:hover .box { border-color: red; } .r a:hover .link { color: red; } </style> </head> <body> <div class="r"> <img src="img/nerdcore.jpg"> <ul> <li class="wang"> <a href="#"> <span class="box"></span> <span class="link">小王</span> </a> </li> <li class="hong"> <a href="#"> <span class="box"></span> <span class="link">小红</span> </a> </li> <li class="ming"> <a href="#"> <span class="box"></span> <span class="link">小明</span> </a> </li> </ul> </div> </body> </html>
可以结合css3做出很多效果,比如说经过某个链接让某个图片缩放。演示地址:http://down.yesyes.wang/book/06/remote.html
最新文章
- CentOS 6.5下Redis安装记录
- js 中 Math对象
- 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)
- JS小函数
- 分分钟知道tiles框架是干嘛的
- media query ie8- 兼容实现总结
- setInterval 函数传参(方法一)
- PHP ReflectionClass
- ThreadPoolExecutor系列<;二、ThreadPoolExecutor 代码流程图>;
- String常用类
- Ios项目添加Pods
- Java线程池 / Executor / Callable / Future
- 树形dp的深入讨论
- StackExchange.Redis在net中使用
- Win7中的路由转发配置实验
- Ubuntu 14.04 Nvidia显卡驱动安装及设置
- 【go】go语言socket通信样例
- CF986B Petr and Permutations [逆序对]
- 【Linux 运维】查看网络连接状态信息之netstat和ss命令详解
- 很详细的Nginx配置说明