css样式表：

@charset "utf-8";

/* CSS Document */

.a

{

    width:80px;

    height:40px;

    background-color:#00F;

    top:200px;

    left:200px;

    overflow:hidden;

    position:absolute;

}

.aa

{

    width:80px;

    height:40px;

    background-color:#00F;

    top:200px;

    left:200px;

    position:absolute;

}

.b

{

    width:80px;

    height:120px;

    border:0px solid #999;

    top:40px;

    left:0px;

    position:absolute;

}

.c

{

    width:80px;

    height:40px;

    background-color:#F00;

    top:0px;

    left:0px;

    overflow:hidden;

    position:absolute;

}

.c1

{

    width:80px;

    height:40px;

    background-color:#F00;

    top:0px;

    left:0px;

    position:absolute;

}

.c2

{

    width:100px;

    height:160px;

    background-color:#F00;

    top:0px;

    left:80px;

    position:absolute;

}

.d

{

    width:80px;

    height:40px;

    background-color:#FF0;

    top:40px;

    left:0px;

    overflow:hidden;

    position:absolute;

}

.d1

{

    width:80px;

    height:40px;

    background-color:#FF0;

    top:40px;

    left:0px;

    position:absolute;

}

.d2

{

    width:100px;

    height:160px;

    background-color:#FF0;

    top:0px;

    left:80px;

    position:absolute;

}

.e

{

    width:80px;

    height:40px;

    background-color:#F0F;

    top:80px;

    left:0px;

    overflow:hidden;

    position:absolute;

}

.e1

{

    width:80px;

    height:40px;

    background-color:#F0F;

    top:80px;

    left:0px;

    position:absolute;

}

.e2

{

    width:100px;

    height:160px;

    background-color:#F0F;

    top:0px;

    left:80px;

    position:absolute;

}

源代码：

<!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>

<link href="Untitled-2.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="a" onmouseover="className='aa'" onmouseout="className='a'">

<div class="b">

<div class="c" onmouseover="className='c1'" onmouseout="className='c'">

<a href="http://www.baidu.com/" target="_blank"><div class="c2">百度一下</div></a>

</div>

<div class="d" onmouseover="className='d1'" onmouseout="className='d'">

<div class="d2"></div>

</div>

<div class="e" onmouseover="className='e1'" onmouseout="className='e'">

<div class="e2"></div>

</div>

</div>

</div>

</body>

</html>

效果图：

HTML 鼠标悬浮隐藏部分 习题的更多相关文章

  1. Selenium之当鼠标悬浮时隐藏的元素才出现

    在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...

  2. asp.net gridview 鼠标悬浮提示信息

    使用场景: gridview绑定数据,某列数据太多,故超过一定字符,隐藏起来,同时鼠标移到指定列显示其明细信息: 知识点: 1,oderListTbl_DataBound事件中,添加,oderList ...

  3. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  4. css实现鼠标悬浮字体流光背景模糊效果

    原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...

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

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

  6. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  7. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  8. ArcGIS api fo silverlight学习三（利用ElementLayer实现鼠标悬浮弹出自定义窗体）

    接着上一节继续学习,本节主要是利用ElementLayer实现鼠标悬浮弹出自定义窗体 参考博文:http://www.cnblogs.com/luxiaoxun/p/3322218.html 一.新建 ...

  9. IntelliJ设置鼠标悬浮提示和修改快捷键

    IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck

随机推荐

  1. Thinkphp自动验证规则

    其实说白了,这篇文章就是转给自己看的,省的下次用的时候满网络找了.有需要的同学也可以看看.自动验证是非常有用的一个技术.平常的验证基本就是,用户名是否为空,用户名是否重复,密码,重复密码是否一致.官方 ...

  2. Django QuerySet和中介模型

    笔记如下 一.QuerySet QuerySet是什么? 类似列表里边存着对象 只和ORM有关系 from app01.models import Book def qDemo(request): b ...

  3. 【ActiveMQ入门-11】ActiveMQ学习-compositeDestination

    概要: 前一章讲解了消费者如何通过通配符来匹配目的地,以实现一个消费者同时接收多个目的地的消息. 对于生产者来讲,可能存在下面的需求: 1. 同一条message可能要发送到多个Queue: 2. 同 ...

  4. LINK : fatal error LNK1158: 无法运行“rc.exe”解决办法 and Visual Studio 2017 下载安装

    LINK : fatal error LNK1158: 无法运行“rc.exe” 首先下载软件包:https://pan.baidu.com/s/1L1N1sikXUaZZd-9nmZnwjA 第一个 ...

  5. MySQL 特殊参数

    ###开发规范 开发规范:关键字大写,库名字小写,要有字符集 CREATE DATABSE oldboy CHARSET utf8;    ###建议采用第一种 CREATE DATABSE oldb ...

  6. [UE4]roll pitch yaw

    UE4中的定义: 一.Roll,绕着X轴旋转的角度 二.Pitch,绕着Y轴旋转的角度 三.Yaw,绕着Z轴旋转的角度 Rotator 一.(Roll,Pitch,Yaw) 二.Rotator(0,0 ...

  7. 第14章 UDP编程（3）_利用UDP实现广播功能

    3. 广播的介绍 (1)广播 ①广播实现一对多的通信,如QQ群 ②它通过向广播地址发送数据报文实现的 (2)SO_BROADCAST选项 ①SO_BROADCAST选项控制着UDP套接字是否能发送广播 ...

  8. USB接口程序编写

    copy from http://blog.csdn.net/luckywang1103/article/details/12393889# HID是Human Interface Devices的缩 ...

  9. php 编程笔记分享 - 非常实用

    php opendir()列出目录下所有文件的两个实例 php opendir()函数讲解及遍历目录实例 php move_uploaded_file()上传文件实例及遇到问题的解决方法 php使用m ...

  10. 使用HTML引用标签来分隔Ticket回复

    今天在查看Ticket的时候,发现如何和客户之间有很多个来回,Ticket的Correspondence就会很长很长,虽然我们有自己的Breakline,但是由于客户回复邮件时,添加的用于分隔旧信息和 ...