css远距离链接
远距离链接主要运用了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
css远距离链接的更多相关文章
- Nginx下css的链接问题
放在 Nginx 下的网页代码,在链接外部 css 文件时,可能出现没有链接成功的问题.需要在 nginx.conf 里的 http 下添加一行. http { include mime.types;
- CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...
- CSS之链接
改变链接样式 当设置为若干链路状态的样式,也有一些顺序规则: a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 <!DOCTYP ...
- 三、CSS样式——链接
CSS链接的四种状态: a:link ——普通的.未被访问的链接 a:visited ——用户已访问的链接 a:hover ——鼠标指针位于链接的上方 a:active ——链接背点击的时刻 常见的链 ...
- CSS基础-链接
链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时 默认的链 ...
- 【静态页面架构】CSS之链接和图像
CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...
- JavaScript HTML CSS外部链接
HTML文件 <!--<html> <head><link rel="stylesheet" type="text/css" ...
- CSS去除链接虚线(兼容IE6、IE7)
在css里加入以下代码: a{ hide-focus: expression( this.hideFocus=true ); outline: none;}
- CSS样式链接和文字常用属性
行内: <div style="color:red;"></div> 内嵌<style>div{background-color:red;}&l ...
随机推荐
- Spark RDD编程核心
一句话说,在Spark中对数据的操作其实就是对RDD的操作,而对RDD的操作不外乎创建.转换.调用求值. 什么是RDD RDD(Resilient Distributed Dataset),弹性分布式 ...
- HDU 4256 The Famous Clock
The Famous Clock Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- PhotoshopCC 如何使用动作文件ATN
非常感谢公司的前端同事,今早给我推荐了一个很好用的插件 atn ,下面简单的总结下 导入 atn 插件的方法: 打开 photoshop 或者 photoshopCC 软件→点击 窗口菜单→找到 动作 ...
- ROM及其他知识
ROM--Read Only Memory 中文意思是:只读存贮器 以前的游戏机用的都是卡带,里面是一块或几块集成电路芯片,游戏程序就是在生产厂家一次性写入这几块芯片,以后用户玩游戏的时候只能读出 ...
- devexpress实现模仿Win8桌面metro风格
1.devexpress强大的控件库,可很容易的实现Win8桌面metro风格.使用的TileControl控件,拖动与Win效果相同.所有图片均来自网络资源.每个块也可实现如图所示的四种大小,如何实 ...
- [译]如何在Web开发中使用Python
[译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...
- JavaWeb:JSTL
JSTL 说明 什么是JSTL? JSP标准标签库(JavaServer Pages Standard Tag Library,JSTL)是一个定制的标签库的集合,用来解决像遍历map或者集合.条件测 ...
- ERP管理员培训报道
金秋十月,丹桂飘香,为期三天的“201610管理员培训”活动于2016年10月19日在苏州总部成功举行.参与本次培训活动的有浙江卡迪夫电缆有限公司.上海华源瓷业股份有限公司.江苏牛牌纺织机械有限公司. ...
- 《深入理解Java虚拟机》学习笔记之内存分配
JVM在执行Java程序的过程中会把它所管理的内存划分若干个不同的数据区域,如下图: 大致可以分为两类:线程私有区域和线程共享区域. 线程私有区域 程序计数器(Program Counter Regi ...
- nginx在CentOs下的安装及配置
前言: 先介绍一下nginx: Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强, ...