<!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. XcodeiOS模拟器安装相关

    模拟器下载 注意: Xcode 7 Beta 不支持 iOS 8.4 及之前的 SDK. 现在的Xcode 6.x 似乎只支持iOS 7.0及之后的版本,早期的模拟器运行时不支持新的CoreSimul ...

  2. Android Bitmap占用内存计算公式

    Android对各分辨率的定义 当图片以格式ARGB_8888存储时的计算方式 占用内存=图片长*图片宽*4字节 图片长 = 图片原始长 (设备DPI/文件夹DPI)  图片宽 = 图片原始宽(设备D ...

  3. INITIAL参数设置导致TRUNCATE TABLE不能降低高水位线案例

    在一个数据库使用下面SQL找出了一批需要降低高水位线的表,其中有几个表没有数据,于是我打算用TRUNCATE来降低高水位线HWM SELECT a.owner,        a.segment_na ...

  4. YourSQLDba版本升级总结

    在使用YourSQLDba做数据库备份.维护时,像其它软件一样,版本升级是不可避免的.因为YourSQLDba一直在不停更新版本.扩展功能.下面介绍一下升级YourSQLDba时的具体步骤和一些注意事 ...

  5. Linux命令学习总结：hexdump

    命令简介: hexdump是Linux下的一个二进制文件查看工具,它可以将二进制文件转换为ASCII.八进制.十进制.十六进制格式进行查看. 指令所在路径:/usr/bin/hexdump 命令语法: ...

  6. java jdbc url 不同数据库

    1.Oracle数据库Class.forName("oracle.jdbc.driver.OracleDriver" ).newInstance() ;String url = & ...

  7. ElasticSearch大数据分布式弹性搜索引擎使用

    阅读目录: 背景 安装 查找.下载rpm包 .执行rpm包安装 配置elasticsearch专属账户和组 设置elasticsearch文件所有者 切换到elasticsearch专属账户测试能否成 ...

  8. Windows系统下Oracle每天自动备份

    linux和unix下面使用shell可以很方便实现,如果windows环境下可以结合计划任务实现 创建备份目录d:\backup, 创建批处理命令Bak.bat,编写备份脚本 exp user/pa ...

  9. SQL Server性能调优系列

    这是关于SQL Server调优系列文章,以下内容基本涵盖我们日常中所写的查询运算的分解以及调优内容项,皆为原创........ 第一个基础模块注重基础内容的掌握,共分7篇文章完成,内容涵盖一系列基础 ...

  10. Linux下部署FTP服务器

    Linux下部署FTP服务器 下载安装包 在这里介绍的是离线部署FTP,首先下载对应的rpm包,下载链接为: 下载vsftpd服务 下载FTP客户端 安装ftp服务器 关闭防火墙 service ip ...