文档章节

鼠标触发事件

CharmyZ
 CharmyZ
发布于 2016/05/12 10:29
字数 160
阅读 6
收藏 0

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
	<div class="nav_box">
		<nav>我是导航条</nav>
		<table>
			<tr>
				<td>我是表格</td>
			</tr>
		</table>
	</div>
	<div class="main_box">我是下面的内容</div>
</body>
</html>

js部分

$(document).ready(function() {
	$('nav').hover(function() {
		$(this).siblings('table').addClass('active');
	}, function() {
		$(this).siblings('table').removeClass('active');
	});
});

css部分

.nav_box{
	width: 100%;
	position: relative;
}
.nav_box nav{
	height: 70px;
	line-height: 70px;
	background-color: #0088cc;
	color: #ffffff;
}
.nav_box table{
	width: 100%;
	height: 300px;
	background-color: #e5e5e5;
	position: absolute;
	top: 70px;
	left: 0px;
	opacity: 0;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.nav_box table.active{
	opacity: 1;
}

 

© 著作权归作者所有

CharmyZ
粉丝 0
博文 23
码字总数 3334
作品 0
闵行
前端工程师
私信 提问
备忘:Browser Events 常用浏览器事件

事件 说明 click 鼠标点击时触发此事件 dblclick 鼠标双击时触发此事件 mousedown 按下鼠标时触发此事件 mouseup 鼠标按下后松开鼠标时触发此事件 mouseover 当鼠标移动到某对象范围的上方时...

immvv
2012/03/30
96
0
学习笔记3(javascript事件列表详解)

最近在学习javascript,就顺便把常用事件给大家整理整理,也让自己加深印象。不足之处欢迎各位补充。 一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown ...

彭博
2012/02/29
873
1
javascript事件列表解说

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmous...

晨曦之光
2012/03/09
27
0
JS响应事件整理

事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松...

城固如春
2016/11/07
8
0
JavaScript--DOM事件

JavaScript--DOM事件 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 一、HTML事件 语法: 功能:在HTML元素上绑定事件。 说明:执行脚本可以是一个函数的调用。 二、DOM0级事件 语法...

JS_HCX
2018/01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部