鼠标触发事件

最新推荐文章于 2024-07-19 12:58:53 发布

weixin_33984032

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量78

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/CharmyZ/blog/673871

版权

2019独角兽企业重金招聘Python工程师标准>>>

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;
}

转载于:https://my.oschina.net/CharmyZ/blog/673871