<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

div{

    width:50px;

    height:20px;

    line-height:20px;

    overflow:hidden;

    border:1px solid red;

    text-align:center;

    }

    a{

        wdith:50px;

        float:left;

        overflow:hidden;

        text-decoration:none;

        }

        span{

            margin-top:-20px;

            display:block;

            }

            a:hover{

                padding-top:20px;

                }

</style>

</head>

<body>

<div>

    <a href="#">

   <span> hover</span>

     默认

    </a>

</div>

</body>

</html>

hover 变内容的更多相关文章

  1. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  2. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  3. 二、CSS 基本介绍

    [ 显示目录 ] [ 隐藏 ] 目录 基本概念 CSS组成部分 CSS的规则 引入CSS样式的方法 颜色的表示 CSS Reset 选择器分类 浮动 盒子模型 box-sizing属性 实例:实现“田 ...

  4. 3D案例，导航，导航升级版

    /*****************************百度钱包旋转变内容******************************/ <!DOCTYPE html> <htm ...

  5. html的小例子

    常用的前端实例: 1略 2.在网页商城中的图片当我们把鼠标放上去之后,图片会显示一个有颜色的外边框,图片某一部分的字体的颜色并发生改变 鼠标放上去之前 鼠标放上去之后: 实现的代码: <!DOC ...

  6. HTML--比较实用的小例子

    常用的前端实例: 1略 2.在网页商城中的图片当我们把鼠标放上去之后,图片会显示一个有颜色的外边框,图片某一部分的字体的颜色并发生改变 鼠标放上去之前 鼠标放上去之后: 实现的代码: <!DOC ...

  7. Justinmind使用教程（1）——概述部分

    Justinmind(http://www.justinmind.com/),类似于Axure的一个原型设计工具.就眼下而言,最适合移动端进行原型设计的工具,预计抛开Axure几条街了,可是眼下国内站 ...

  8. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  9. javascript基础笔记

    1.获取元素:                 var box=document.getElementById("box");2.改变元素内容:                 b ...

随机推荐

  1. (三)Maven仓库介绍与本地仓库配置

    1.Maven本地仓库/远程仓库的基本介绍 示意图: 本地仓库是指存在于我们本机的仓库,在我们加入依赖时候,首先会跑到我们的本地仓库去找,如果找不到则会跑到远程仓库中去找.对于依赖的包大家可以从这个地 ...

  2. Hadoop系列教程<一>---Hadoop是什么呢？

    Hadoop适合应用于大数据存储和大数据分析的应用,适合于服务器几千台到几万台的集群运行,支持PB级的存储容量.Hadoop典型应用有:搜索.日志处理.推荐系统.数据分析.视频图像分析.数据保存等.但 ...

  3. parawork平台介绍

     ParaWork软件项目估算平台---科学估算项目,让管理更简单 ParaWork软件项目估算平台是由北京软件造价评估技术创新联盟与北京科信深度科技有限公司联合开发.维护的软件项目估算工具,为会员免 ...

  4. AutoMySQLBackup 3.0 Bug:"du: WARNING: use --si, not -H"

    案例环境: 操作系统版本: Red Hat Enterprise Linux Server release 5.7 64bit 数据库版本 : 5.6.19 MySQL Community Serve ...

  5. 在Ubuntu上单机安装Hadoop

    最近大数据比较火,所以也想学习一下,所以在虚拟机安装Ubuntu Server,然后安装Hadoop. 以下是安装步骤: 1. 安装Java 如果是新机器,默认没有安装java,运行java –ver ...

  6. 完全卸载oracle11g步骤

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...

  7. C++基础——模拟事务 （2）Composite模式

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  8. Windows 安装Kafka

    Windows 7 安装Apache kafka_2.11-0.9.0.1     下载所需文件 Zookeeper: http://www.apache.org/dyn/closer.cgi/zoo ...

  9. 浏览器对于常见HTTP状态码的反应

    在我们向服务器发送一个HTTP请求时,会经历tcp连接(三次握手),发送HTTP请求,服务器返回HTTP响应,浏览器对响应中的状态码进行分析判断,来确定请求是否成功,是否成功得到我们需要的信息. 那么 ...

  10. struts2案例

    Struts 2是一个MVC框架,以WebWork框架的设计思想为核心,吸收了Struts 1的部分优点.Struts 2拥有更加广阔的前景,自身功能强大,还对其他框架下开发的程序提供很好的兼容性.下 ...