代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠标移入下划线展开</title>

<style type="text/css">

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

#underline:after{

    content: "";

    width: 0;

    height: 1px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{

   left: 0%;

   width: 100%;

}

</style>

</head>

<body>

    <div id="underline"></div>

</body>

</html> 

参考文：https://blog.csdn.net/qq_31648761/article/details/72953434?locationNum=9&fps=1

方法二：
<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>Audio Description</a>

css：
.ui-box {
    text-decoration:none;
    border:none;
    font-family:‘Roboto‘, sans-serif;
    font-size:14px;
    position:relative;
    vertical-align:baseline;
    padding:10px
}
.bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>.ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {
    content:‘‘;
    position:absolute
}
.bottom-inOutSpread:after {
    border-bottom:2px solid #333;
    left:51%;
    right:51%;
    bottom:0px;
    -webkit-transition-property:all;
    -moz-transition-property:all;
    -o-transition-property:all;
    transition-property:all;
    -webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
    -moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
    -o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
    transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
    -webkit-transition-duration:200ms;
    -moz-transition-duration:200ms;
    -o-transition-duration:200ms;
    transition-duration:200ms;
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s
}
.bottom-inOutSpread:hover:after {
    left:0%;
    right:0%
}
.bottom-inOutSpread:not(:hover):after {
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s
}
原文：http://www.cnblogs.com/HONGYE1994/p/8012093.html

利用css实现鼠标经过元素，下划线由中间向两边展开的更多相关文章

  1. 使用CSS去除 去掉超链接的下划线方法

    我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...

  2. css命名为何不推荐使用下划线_

    一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...

  3. CSS超链接样式，去除下划线等

    控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

  4. 通过css控制超链接不显示下划线

    “页面属性”——“链接”——“下划线样式”——“始终无下划线” <style type="text/css"> a:link { text-decoration: no ...

  5. css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

  6. CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案

    经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...

  7. css如何让父元素下的所有子元素高度相同

    小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...

  8. CSS 控制鼠标在元素停留的样式

    以下资料来自网络,收藏学习总结用: 有时候需要改变鼠标样式,DIV 可以改成手型等,A也可以改成光标形式 巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊.CSS鼠标样式 ...

  9. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

随机推荐

  1. MSSQL遇到以零作除数错误的处理方法

    在sql server中做除法处理的时候,我们经常需要处理除数为零的情况,因为如果遇到这种情况的时候,sqlserver会抛出遇到以零作除数错误的异常,我们总不希望把这个异常显示给用户吧. 做个会报这 ...

  2. Qt之任务栏系统托盘图标

    转自  --> http://blog.csdn.net/qivan/article/details/7506306 托盘图标,一个自己脑子出现很久的词,可惜自己都没动手去实现.最近看见的,听见 ...

  3. Python基础之元组操作

    元组的常用操作包括但不限于以下操作: 元组的索引,计数等 这里将对列表的内置操作方法进行总结归纳,重点是以示例的方式进行展示. 使用type获取创建对象的类 type(tuple) 使用dir获取类的 ...

  4. 【HDU 6428】Calculate 莫比乌斯反演+线性筛

    题解 代码 #include <bits/stdc++.h> using namespace std; typedef long long ll; const ll mod = 1LL&l ...

  5. linux命令学习笔记（38）：cal 命令

    cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历. “阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”. ．命令格式: cal ...

  6. FFMPEG内存操作（二）从内存中读取数及数据格式的转换

    相关博客列表: FFMPEG内存操作(一) avio_reading.c 回调读取数据到内存解析 FFMPEG内存操作(二)从内存中读取数及数据格式的转换 FFmpeg内存操作(三)内存转码器 在雷神 ...

  7. 移动端H5 button 默认事件

    button 在移动端下会有自带的默认事件,如果不处理的话,点击按钮的时候会有自动刷新页面的效果,原因就是button的默认事件没有阻止. 所以在点击事件里面要加上 e.preventDefault( ...

  8. python实现redis三种cas事务操作

    cas全称是compare and set,是一种典型的事务操作. 简单的说,事务就是为了存取数据库中同一数据时不破坏操作的隔离性和原子性,从而保证数据的一致性. 一般数据库,比如MySql是如何保证 ...

  9. Impala的JDBC无法连接

    这是因为客户端连接的JDBC是Impala的master机器,而不是DataNode:因为JDBC的服务宿主是Impalad,而Impalad只是部署在DataNode

  10. bzoj 3994 约数个数和 —— 反演+数论分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3994 推导过程和这里一样:https://www.cnblogs.com/MashiroSk ...