JavaScript实现鼠标经过显示下拉框
作者：KathyLJQ 时间：2024-04-28 09:52:36
本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码，供大家参考，具体内容如下
代码：
<!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>
* {
margin: 0;
padding: 0;
}
.nav {
margin: 100px auto;
width: 500px;
}
.nav>li {
float: left;
}
li {
list-style: none;
}
a {
display: block;
text-decoration: none;
color: gray;
height: 40px;
width: 100px;
text-align: center;
line-height: 40px;
box-sizing: border-box;
}
.nav>li>a {
color: black;
}
.nav>li>a:hover {
background-color: lightgray;
}
.nav>li>ul>li>a {
/* display: none; */
border: 1px solid orange;
border-top: none;
}
.nav>li>ul>li>a:hover {
background-color: lightyellow;
}
.nav>li>ul {
display: none;
}
</style>
</head>
<body>
<ul class="nav" id=nav>
<li>
<a href="#" >新浪</a>
<ul>
<li><a href="#">新闻</a> </li>
<li><a href="#">体育</a> </li>
<li><a href="#">快讯</a> </li>
<li><a href="#">生活</a> </li>
<li><a href="#">微博</a> </li>
</ul>
</li>
<li>
<a href="#" >新浪</a>
<ul>
<li><a href="#">新闻1</a> </li>
<li><a href="#">体育1</a> </li>
<li><a href="#">快讯1</a> </li>
<li><a href="#">生活1</a> </li>
<li><a href="#">微博1</a> </li>
</ul>
</li>
<li>
<a href="#" >新浪</a>
<ul>
<li><a href="#">新闻2</a> </li>
<li><a href="#">体育2</a> </li>
<li><a href="#">快讯2</a> </li>
<li><a href="#">生活2</a> </li>
<li><a href="#">微博2</a> </li>
</ul>
</li>
</ul>
<script>
var heads = document.querySelectorAll('.nav>li');
for (var i = 0; i < heads.length; i++) {
heads[i].onmouseover = function() {
this.children[1].style.display = "block";
}
heads[i].onmouseout = function() {
this.children[1].style.display = "none";
}
}
</script>
</body>
</html>
来源：https://blog.csdn.net/KathyLJQ/article/details/115585358
标签：js,鼠标,下拉框
0
投稿猜你喜欢
客户端JavaScript代码封装
2008-12-26 18:10:00
Vue 实现从小到大的横向滑动效果详解
2024-05-10 14:14:10
一文详解PyQt5中信号(Signal)与槽(Slot)
2022-06-27 19:53:08
pytorch实现手写数字图片识别
2021-04-20 12:46:58
python自动化发送邮件实例讲解
2023-11-11 16:01:41
python 用opencv实现霍夫线变换
2021-09-14 20:18:25
python中的 sorted()函数和sort()方法区别
2022-04-13 05:16:11
python删除文件夹下相同文件和无法打开的图片
2023-03-09 19:26:42
离线安装Pyecharts的步骤以及依赖包流程
2021-12-16 11:43:12
删除数据库中重复数据的几个方法
2024-01-17 12:56:36
Python tkinter常用操作代码实例
2021-01-05 21:26:09
简述Python2与Python3的不同点
2023-03-25 10:22:10
javascript 用函数语句和表达式定义函数的区别详解
2024-04-16 09:06:26
通过自学python能找到工作吗
2021-07-24 04:26:33
SQL Server上进行表设计时表的主键设计问题
2010-06-24 16:10:00
matlab xlabel位置的设置方式
2022-06-11 06:51:24
sql中count或sum为条件的查询示例(sql查询count)
2024-01-16 04:05:02
解决python matplotlib imshow无法显示的问题
2023-07-19 23:59:25
微信小程序地图定位的实现方法实例
2023-08-25 10:13:10
Python中的pandas表格模块、文件模块和数据库模块
2024-01-28 05:32:45
