远距离链接主要运用了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远距离链接的更多相关文章

  1. Nginx下css的链接问题

    放在 Nginx 下的网页代码,在链接外部 css 文件时,可能出现没有链接成功的问题.需要在 nginx.conf 里的 http 下添加一行. http { include mime.types;

  2. CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）

    我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...

  3. CSS之链接

    改变链接样式 当设置为若干链路状态的样式,也有一些顺序规则: a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 <!DOCTYP ...

  4. 三、CSS样式——链接

    CSS链接的四种状态: a:link ——普通的.未被访问的链接 a:visited ——用户已访问的链接 a:hover ——鼠标指针位于链接的上方 a:active ——链接背点击的时刻 常见的链 ...

  5. CSS基础-链接

    链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时   默认的链 ...

  6. 【静态页面架构】CSS之链接和图像

    CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...

  7. JavaScript HTML CSS外部链接

    HTML文件 <!--<html> <head><link rel="stylesheet" type="text/css" ...

  8. CSS去除链接虚线（兼容IE6、IE7)

    在css里加入以下代码: a{    hide-focus: expression( this.hideFocus=true );    outline: none;}

  9. CSS样式链接和文字常用属性

    行内: <div style="color:red;"></div> 内嵌<style>div{background-color:red;}&l ...

随机推荐

  1. SpringMVC总结的部分教程及使用方法

    注:本文只用注解来实现 SpringMVC各种流程图流程图(其他的各种流程图)jsp.xml.action彼此之间的关系,都如何使用spring-mvc.xml如何配置,放在哪里?action中如何转 ...

  2. POJ 2914 Minimum Cut Stoer Wagner 算法 无向图最小割

    POJ 2914 题意:给定一个无向图 小于500节点,和边的权值,求最小的代价将图拆为两个联通分量. Stoer Wagner算法: (1)用类似prim算法的方法求"最大生成树" ...

  3. BZOJ 2456: mode（乱搞）

    挺神奇的一道题，被1M内存坑了好久= =，这道题得记录当前众数以及众数与其他数的差，如果现在读入的这个数与众数相等，就加1，否则减一，如果差为0就替代掉他，可以证明如果众数存在的话这样一定能找出来 C ...

  4. 使用Nuget管理dll

    前言 nuget 已经不是什么新东西,它是vs的一个扩展工具,可以让我们在项目中添加.删除.更新引用变得更加快捷方便.现在有许多传统公司对dll的管理还是很落后的,有些甚至时通过发送dll文件,这样做 ...

  5. Ansible详解（一）

    简介 Ansible是一个简单的自动化运维管理工具,基于Python语言实现,由Paramiko和PyYAML两个关键模块构建,可用于自动化部署应用.配置.编排task(持续交付.无宕机更新等).主版 ...

  6. 【转】44款Java 网络爬虫开源软件

    原帖地址 http://www.oschina.net/project/lang/19?tag=64&sort=time 极简网络爬虫组件 WebFetch WebFetch 是无依赖极简网页 ...

  7. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

    去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...

  8. LSTM模型与前向反向传播算法

    在循环神经网络(RNN)模型与前向反向传播算法中,我们总结了对RNN模型做了总结.由于RNN也有梯度消失的问题,因此很难处理长序列的数据,大牛们对RNN做了改进,得到了RNN的特例LSTM(Long ...

  9. 使用curl操作InfluxDB

    这里列举几个简单的示例代码,更多信息请参考InfluxDB官方文档: https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_x64Influ ...

  10. 关于label和input对齐的那些是秦

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...