HTML 鼠标悬浮隐藏部分 习题
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 鼠标悬浮隐藏部分 习题的更多相关文章
- Selenium之当鼠标悬浮时隐藏的元素才出现
在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...
- asp.net gridview 鼠标悬浮提示信息
使用场景: gridview绑定数据,某列数据太多,故超过一定字符,隐藏起来,同时鼠标移到指定列显示其明细信息: 知识点: 1,oderListTbl_DataBound事件中,添加,oderList ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- css实现鼠标悬浮字体流光背景模糊效果
原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- jquery特效（5）—轮播图③（鼠标悬浮停止轮播）
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- ArcGIS api fo silverlight学习三（利用ElementLayer实现鼠标悬浮弹出自定义窗体）
接着上一节继续学习,本节主要是利用ElementLayer实现鼠标悬浮弹出自定义窗体 参考博文:http://www.cnblogs.com/luxiaoxun/p/3322218.html 一.新建 ...
- IntelliJ设置鼠标悬浮提示和修改快捷键
IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck
随机推荐
- 【python】序列切片和range函数
序列的每个元素都可以用2种索引的表达方式,一种是正数索引,另一种是负数索引. 序列切片,作用是访问序列中一定范围的元素,格式“序列名[A:B]”,其中A为所切片的第一个元素的索引号,而B为切片后剩下的 ...
- 如何判断事务是否完成，SqlTransaction
SqlConnection sconn = null; SqlCommand scmd = null; SqlTransaction strans = null; try { string sqlIn ...
- Hibernate hibernate.cfg.xml配置
数据库连接<required>: <property name="hibernate.connection.driver_class"> com.mysql ...
- X-Requested-With
最近工作中发现,使用angular $http跨域的时候,虽然后台已经配置了跨域允许,但是还是报错. 查资料发现,angular $http 的request的请求头中,默认有: Access-Con ...
- 使用 Nmon 监控 Linux 的系统性能
Nmon(得名于 Nigel 的监控器)是IBM的员工 Nigel Griffiths 为 AIX 和 Linux 系统开发的一款计算机性能系统监控工具.Nmon 可以把操作系统的统计数据展示在屏幕上 ...
- win10 停留在启动画面
这是由于部分电脑的主板不支持快速启动造成的,所以把快速启动功能关闭掉即可.具体操作步骤如下:控制面板--硬件和声音--电源选项--选择电源按钮的功能--选择“更改当前不可用的设置”,然后把“启用快速启 ...
- 手机app/h5页面http请求抓包调试
1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示:
- 2017-2018-2 20165233 实验三 敏捷开发与XP实践
20165233 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 一.编码标准 编程标准包含:具有说明性的名字.清晰的表达式.直截了当的控制流.可读的代码和注释,以及 ...
- 练习Laravel Homestead的安装
1 安装VirtualBox和Vagrant 在启动Homestead环境之前,你必须安装VirtualBox(https://www.virtualbox.org/wiki/Downloads)和V ...
- 委托学习过程及委托、Lambda表达式和匿名方法的关系总结及事件总结
第一章,当开始学习委托的时候,我们会问什么是委托?为什么要学习委托? 一,什么是委托? 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法, ...