【web前端(四十)】javascript_jquery_鼠标事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>鼠标事件</title>
		<style>
			ul {}
			/*
			 * 浮动标签
			 */
			
			div>ul>li {
				float: left;
			}
			
			a {
				/*text-decoration:none可以去掉下划线*/
				text-decoration: none;
				color: black;
				display: block;
				height: 30px;
				background-color: pink;
				margin-left: 10px;
				/*字体浮动在行高中间*/
				line-height: 30px;
				/*外边框左右间距*/
				padding: 0px 10px;
				/*字体*/
				font-size: small;
			}
			
			ul ul {
				display: none;
			}
		</style>
		<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(
				function() {
					/*给所有的a标签定义*/
					//mouseenter
					$("a").mouseenter(
						/*触发事件*/
						function() {
							//这里this指向我们选择的标签————a标签。
							//但是，这里this是DOM对象，
							//也就是说，this无法直接使用jquery对象里面的方法。
							//所以，我们就再用$对象，将this包装成jquery对象。
							//即jquery对象的这种方法就是，
							//它先将我们选择的对象包装成jquery对象，
							//最后这个this返回的是DOM对象。
							//若想再用DOM对象，就把this对象再包装一下即可。

							//接下来，我们要找的是this标签的兄弟标签，然后选择ul标签。
							//但是，它默认的是不显示这个标签的。
							//所以，我们这里就要将其通过CSS的show方法显示出来。 
							$(this).next("ul").show();
							console.log("隐藏效果");
							//show特效显示
						}
					);

					/*隐藏*/
					//这里必须要回到上一级去触发，不然效果就是，一离开文字就隐藏了。
					$("a").mouseout(
						function() {
							$(this).next("ul").hide();
						}
					);
				}
			);
		</script>
	</head>

	<body>
		<div>
			<ul>
				<li>
					<a href="$">一级标题</a>
					<ul>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
					</ul>
				</li>

				<li>
					<a href="$">一级标题</a>
					<ul>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
					</ul>
				</li>

				<li>
					<a href="$">一级标题</a>
					<ul>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
					</ul>
				</li>

				<li>
					<a href="$">一级标题</a>
					<ul>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
						<li>二级标题</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>

这里的效果就是，鼠标悬停到标签上，其内容会出现。但是，鼠标离开，内容就隐藏了。