<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title></title>

     <link rel="stylesheet" href="">

 <style type="text/css">

 *{margin: 0;padding: 0;}

 .nav{

 height: 60px;

 width: 100%;

 background: #5ab60d;

 clear: both;

 overflow: hidden;

 }

 .nav_box{

 width: 1200px;

 height: 60px;

 line-height: 60px;

 margin: 0 auto;

 }

 .nav_box a{

 display: block;

 width: 99px;

 height: 100%;

 float: left;

 position: relative;

 z-index: 0;

 }

 .nav_box a span{

 display: inline-block;

 position: absolute;

 left: 0px;

 top: 0px;

 width: 100%;

 height: 100%;

 line-height: 60px;

 text-align: center;

 color: #fff;

 font-size: 18px;

 z-index: 2;

 overflow: hidden;

 }

 .nav_box a:hover em{

     top: 0;

 }

 .nav_box a em{

     display: inline-block;

     height: 100%;

     width: 100%;

     transition: all .3s;

     background: #4fa10b;

     position: absolute;

     top: 100%;

     left: 0;

     z-index: 1;

 }

 </style>

 </head>

 <body>

     <div class="nav">

         <div class="nav_box">

             <a href=""><span>首页</span><em></em></a>

             <a href=""><span>积分商城</span><em></em></a>

             <a href=""><span>第三个</span><em></em></a>

         </div>

     </div>

 </body>

 </html>

css3导航hover悬停效果的更多相关文章

  1. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  2. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  3. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  4. css3制作惊艳hover切换效果

    css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  5. CSS3在hover下的几种效果

    CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦 效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. HTML+CSS鼠标悬停效果

    HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a clas ...

  8. 前端每日实战：126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

  9. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

随机推荐

  1. Ubuntu下的多线程下载工具：MultiGet；并与 Firefox 建立关联 uget

    Ubuntu下非常给力的下载工具--uget+aria2 1.uget的安装: sudo add-apt-repository ppa:plushuang-tw/uget-stable sudo ap ...

  2. (C++)UrlEncode的标准实现

    http://blog.163.com/xiaopengyan_109/blog/static/149832173201072685539394/ 地址栏传中文参数后是什么编码格式 网页中的表单使用P ...

  3. 【Linux】关于Linux的部分细节与配置文件

    文章对Linux的启动过程 进行了讲解,摘录一些要点,(摘自:https://www.ibm.com/developerworks/cn/linux/l-linuxboot/)如下: 当系统首次引导时 ...

  4. Oracle Data Guard 重要配置参数

    Oracle Data Guard主要是通过为生产数据库提供一个或多个备用数据库(是产生数据库的一个副本),以保证在主库不可用或异常时数据不丢失并通过备用数据库继续提供服务.对于Oracle DG的配 ...

  5. 算法笔记_109:第四届蓝桥杯软件类省赛真题（JAVA软件开发本科B组部分习题）试题解答

    目录 1 马虎的算式 2 黄金连分数 3 有理数类 4 幸运数 5 连号区间数   前言:以下试题解答代码部分仅供参考,若有不当之处,还请路过的同学提醒一下~ 1 马虎的算式 标题: 马虎的算式 小明 ...

  6. Theano Logistic Regression

    原理 逻辑回归的推理过程能够參考这篇文章:http://blog.csdn.net/zouxy09/article/details/20319673,当中包括了关于逻辑回归的推理,梯度下降以及pyth ...

  7. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  8. 设置sqlplus访问远程oracle数据库的最快方法

    设置sqlplus访问远程oracle数据库的最快方法 时间:2010-01-21 10:57来源: 作者: 点击: 2次 设置sqlplus访问远程oracle数据库的最快方法,如果要连接远程数据库 ...

  9. DataSnap对象传递

    比较简单的方法: 1.引用DBXJSON,  DBXJSONReflect 假设有一个类: type TKid = class FirstName: String; LastName: String; ...

  10. Cannot refer to the non-final local variable user defined in an enclosing scope 内部类定义在方法内，方法定义的参数（形参）无法被内部类直接访问，需要用final定义

    为什么匿名内部类参数必须为final类型 1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量 ...