This article shares the specific code of JavaScript to display the drop-down box when the mouse passes over it for your reference. The specific content is as follows Code: <!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="#" >Sina</a> <ul> <li><a href="#">News</a> </li> <li><a href="#">Sports</a> </li> <li><a href="#">News Flash</a> </li> <li><a href="#">Life</a> </li> <li><a href="#">Weibo</a> </li> </ul> </li> <li> <a href="#" >Sina</a> <ul> <li><a href="#">News 1</a> </li> <li><a href="#">Sports 1</a> </li> <li><a href="#">News Flash 1</a> </li> <li><a href="#">Life 1</a> </li> <li><a href="#">Weibo1</a> </li> </ul> </li> <li> <a href="#" >Sina</a> <ul> <li><a href="#">News 2</a> </li> <li><a href="#">Sports 2</a> </li> <li><a href="#">News Flash 2</a> </li> <li><a href="#">Life 2</a> </li> <li><a href="#">Weibo 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> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Build a Docker private warehouse (self-signed method)
>>: How to use the concat function in mysql
MySQL itself does not support recursive syntax, b...
Why is it that when the input tag type is file an...
First: via text/HTML var txt1="<h1>Tex...
Written in front Sometimes you need to install so...
/******************** * Character device driver**...
In a web page, the <input type="file"...
This article shares the MySQL installation and co...
When browser vendors bend the standards and take i...
Table of contents 1 The common rules for creating...
In the later stage of exploiting SQL injection vu...
Table of contents Brief Introduction setInterval ...
Table of contents react-native project initializa...
Table of contents introduce Object attributes in ...
This article records the installation graphic tut...
Preface In the development of actual projects, we...