JS实现鼠标悬停显示二级菜单简单代码 jQuery实现
实现图片(效果图) 代码在最下面
这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单)
就成功出现了
简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
margin: 15px 15px;
display: inline-block;
}
ul {
display: none;
list-style-type: none;
cursor: pointer;
padding: 0px;
margin: 5px 0px;
}
</style>
</head>
<body>
<div class="div1">div1
<ul>
<li>div2</li>
<li>div3</li>
<li>div4</li>
<li>div5</li>
</ul>
</div>
</body>
<script src="../jQuery地址库/jQuery.js"></script>
<script>
//获取类.div1节点 div;设置鼠标经过节点mouseover
$('.div1').mouseover(function() {
$('ul').css('display', 'block');
});
//获取类.div1节点 div;设置鼠标离开节点mouseout
$('.div1').mouseout(function() {
$('ul').css('display', 'none');
})
</script>
</html>