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
随机推荐
- 【数据库】mysql的安装
打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup.exe”,出现如下界面 mysql安装向导启动,按“Next”继续 选择安装类型,有“Typic ...
- Gitlab Jenkins WebHook 持续集成配置踩坑记
Jenkins相关介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 目的 配置Gitla ...
- java工具类-FreeMarker
package com.huawei.it.citools.utils; import java.io.File;import java.io.IOException;import java.io.S ...
- EF webapi json序列化 表间相互引用 无限循环问题解决方案
WebApiConfig.cs中加入 如下代码即可解决无限循环问题 var json = config.Formatters.JsonFormatter; // 解决json序列化时的循环引用问题 j ...
- spring Annotation based configuration
spring 注解相关 https://docs.spring.io/spring/docs/3.0.0.M3/reference/html/ch04s11.html
- 【Active入门-3】ActiveMQ学习-发布者与订阅者
2015年4月28日 1个发布者,1个订阅者,topic 方式1: 先发布消息: 然后订阅消息: 方式2: 先订阅消息: 然后发布消息:订阅者如下: 结论1: 从上面可以看出,消息发布需要在线发布. ...
- bzoj4161: Shlw loves matrixI
Description 给定数列 {hn}前k项,其后每一项满足 hn = a1*h(n-1) + a2*h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计 ...
- Oracle学习操作（5）触发器
Oracle触发器 一.触发器简介 具备某些条件,由数据库自动执行的一些DML操作行为: 二.语句触发器 现在数据库创建t_book表:t_booktype表:t_book表的typeid存在外键参考 ...
- 开源框架：Apache的DBUtils框架
开源框架:Apache的DBUtils框架 Commons DbUtils 1.4 API 开源框架:DBUtils使用详解 Download Apache Commons DbUtils 官方文档
- CentOS 静态IP设置&修改网卡名
一.CentOS版本查看的方法 1. lsb_release -a (若报命令找不到,直接yum install lsb –y) 2. cat /etc/redhat-release 二.CentOS ...