<!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. js---OOP浅谈

    对象化编程-------简单地去理解就是把javascript能涉及到的范围分成各种对象,对象下面再次划分对象.编程出发点多是对象,或者说基于对象.所说的对象既包含变量,网页,窗口等等 对象的含义   ...

  2. margin css的外边距

    h2{margin:10px 0;} div{margin:20px 0;} ...... <h2>这是一个标题</h2> <div> <h2>这是又一 ...

  3. .NET 4.5 中新提供的压缩类

    Windows8 的开发已经如火如荼开始了,在 Windows8 中提供的 .NET Framework 已经更新到了 4.5 版,其中又增加了一些新的特性,对压缩文件的支持就是其中之一. 在 4.5 ...

  4. 【转】Hadoop命令大全

    Hadoop命令大全 本节比较全面的向大家介绍一下Hadoop命令,欢迎大家一起来学习,希望通过本节的介绍大家能够掌握一些常见Hadoop命令的使用方法.下面是Hadoop命令的详细介绍. 1.列出所 ...

  5. mysqldump: Got error: 1142: SELECT, LOCK TABLES command denied to user 'root'@'localhost' for table 'accounts' when using LOCK TABLES

    AutoMySQLBackup备份时,出现mysqldump: Got error: 1142: SELECT, LOCK TABLES command denied to user 'root'@' ...

  6. ORACLE NUMBER类型Scale为0引发的问题

    今天遇到了一个很有意思的NUMBER类型Scale引发的问题,我用一个简单的测试用例来展示一下这个案例.假如有个TEST的表,有个字段类型为NUMBER,我插入下面两条数据 CREATE TABLE ...

  7. OpenStack调研：OpenStack是什么、版本演变、组件关系（Havana）、同类产品及个人感想

    一点调研资料,比较浅,只是觉得部分内容比较有用,记在这里: 首先,关于云计算,要理解什么是SAAS.PAAS.IAAS,这里不述:关于虚拟化,需要知道什么是Hypervisor,这里也不述: Open ...

  8. Linux一些经典书籍

    一.linux之路 1.入门篇 <LINUX权威指南>书不错,写的很全面也比较广,涉及的不深,做为入门书籍不错,可以比较全面的了解linux .另外比较热门的也可以看看<鸟哥的私房菜 ...

  9. Apache2.4部署django出现403 Forbidden错误解决办法

    前言:Apache2.4部署django出现403 Forbidden错误最好要结合apache中的错误日志来观察出现何种错误导致出现403错误 下午百度了一下午没找到解决办法,试了n种方法,简直坑爹 ...

  10. A book to recommend: The art of readable code

    我最喜欢的一本书 - 教我如何写可读的代码 Two month fan of the book, from August - Oct. 2014; and then, started to pract ...