您正在使用 IPV4 [44.201.24.171] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 007
2024年 劳动节 034
2025年 元 旦 279
2025年 春 节 307
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JavaScript实现鼠标经过显示下拉框
内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......
<!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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript实现鼠标经过表格行给出颜色标识

 

下一篇:JavaScript实现动态加载删除表格

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:9
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....