JavaScript实现鼠标经过显示下拉框
作者：KathyLJQ 发布时间：2024-04-28 09:52:36
标签：js,鼠标,下拉框
本文实例为大家分享了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
0
投稿猜你喜欢
- 下载源码git clone https://github.com/mysql/mysql-server.gitcd mysql-server
- （1）方法一、直接用a标签的href+数据库中文件地址，即可下载。缺点：word excel是直接弹框下载，对于image txt 等文件的
OpenCV 是一个流行的开源计算机视觉库，可用于不同的编程语言，例如 Python、C++ 和 JavaScript。它提供了一套丰富的工- 首先要下载：Graphviz - Graph Visualization Software安装完成后将安装目录的bin 路径加到系统路径中，
- 导语电脑桌面文件太多查找起来比较花费时间，并且凌乱的电脑桌面也会影响工作心情，于是利用python根据时间自动建立当日文件夹，这样就可以把桌
- Linux服务器有CentOS、Fedora等，都预先安装了Python，版本从2.4到2.5不等，而Windows类型的服务器也多数安装了
- 本文实例为大家分享了html5 canvas在图片上画超链接的具体代码，供大家参考，具体内容如下1. html<canvas id=&
- 1、安装AnacondaAnaconda指的是一个开源的Python发行版本，其包含了conda、Python等180多个科学包及其依赖项。
- 方法一： 1、打开查询分析器，输入命令 BACKUP LOG database_name WITH NO_LOG 2、再打开企业管理器--右
- 如下所示：' '.join(line.split())例如：'line dd',运行line.split()
- jsp表达式方式： <center> <table border="1"> <％ for
- 整本书围绕着一个叫做“CSS禅意花园”的网站展开，其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接，可惜进去之后发现内容
- 本文实例为大家分享了js轮播图实现代码，供大家参考，具体内容如下思路：1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow
- s={ x1，x2，x3.....}；集合有自动去重的功能，而且可以进行交并补运算，而且集合是无序的，每次打印的结果不一样，故不可以用元素下
- 前言WSGI 有三个部分, 分别为服务器(server), 应用程序(application) 和中间件(middleware). 已经知道
- 安装http://docs.sqlalchemy.org1、安装#进入虚拟环境#执行./python3 -m pip installimpo
- 前言大多数人只知道github是开源社区，可以用来做项目的版本管理，但是其实他还有一些其他功能和小彩蛋。有没有和我一样不想花钱去购置服务器的
- 一.脚本基础 1.USE语句 &n
- 最近，我不得不对我的一个客户的旧网站进行更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经
- 关于python 性能提升的一些方案。一、函数调用优化（空间跨度，避免访问内存） 程序的优化核心点在于尽量减少操作跨度，包括代码执
