<!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>
这里的效果就是,鼠标悬停到标签上,其内容会出现。但是,鼠标离开,内容就隐藏了。