Html中鼠标悬停显示二级菜单的两种方法

最新推荐文章于 2024-05-13 23:35:43 发布

weixin_34245169

最新推荐文章于 2024-05-13 23:35:43 发布

阅读量1.6k

点赞数 1

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/SandyLam/p/5869633.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
float: left;
}
li{
display: none;
}
</style>
<script type="text/javascript">
function disp(){
for(var i = 0; i<3; i++){
document.getElementsByClassName('sss')[i].style.display='block';
}
}
function out(){
for(var i = 0; i<3; i++){
document.getElementsByClassName('sss')[i].style.display='none';
}
}
</script>
</head>
<body>
<ul onmouseover="disp()" onmouseout="out()"> 手机数码
<li class="sss">iPhone</li>
<li class="sss">SAMSUNG</li>
<li class="sss">SAMSUNG</li>
</ul>
</body>
</html>

方法二

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:hover #b{
display: block;
}
#b{
display: none;
}
</style>
</head>
<body>
<ul>
<li>sss
<ul id="b">
<li ></li>
<li ></li>
<li ></li>
<li ></li>
</ul>
</li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/SandyLam/p/5869633.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34245169

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Bootstrap 中下拉菜单修改成鼠标悬停直接显示原创

11-23

2. 当鼠标移动到二级菜单上时，顶级菜单的高亮样式会消失，影响用户体验。接下来，我们介绍第二种方法，利用jQuery来实现更灵活的控制。这种方法可以保留Bootstrap的原有行为，同时解决第一种方法中的问题。首先，...

鼠标悬停显示二级菜单HTML+CSS

不知名

11-27

2791

鼠标悬停显示二级菜单HTML+CSS

参与评论您还未登录，请先登录后发表或查看评论

CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）

王佳斌

10-12

2万+

CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单），HTML css3菜单鼠标移入显示下方二级菜单，用纯CSS实现鼠标经过后出现下拉菜单，css实现网页中鼠标移入出现下拉框，用纯CSS实现鼠标经过后出现下拉菜单，鼠标移动下拉菜单(下拉菜单之纯CSS实现方法) 鼠标悬停显示下拉菜单，html鼠标悬停下拉列表，CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程，官方教程。hover菜单时显示隐藏的div盒子，里面有二级菜单。

Html+Css+jQuery悬浮菜单

gly_technology的博客

01-17

872

当鼠标悬浮弹出时,弹出下拉菜单;当鼠标离开时,收起菜单.

三种方式实现网页二级菜单

热门推荐

Bazingaea的博客

11-28

6万+

方法一：使用HTML和CSS实现首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构 <div class="test"> <ul> <li>A</li> <li>B&lt..

Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

10-23

比如，在鼠标悬停效果中，当鼠标移动到父节点（一级主菜单）上时，就可以通过遍历找到对应的子节点（二级分类菜单），并将其显示出来。接下来，我们将具体分析如何实现一个类似新浪游戏频道的悬停菜单效果。首先...

jQuery鼠标悬停展开3d二级菜单动画特效源码.zip

11-19

在网页的导航菜单中，当鼠标悬停在一级菜单项上时，二级菜单以3D效果展开，为用户提供一种视觉上的层次感和立体感，使得网站的导航更加生动且易于操作。这个源码的核心知识点主要包括以下几个方面： 1. **jQuery...

jquery鼠标滑过显示二级下拉菜单代码

01-18

我们将监听一级菜单项的`mouseenter`和`mouseleave`事件，当鼠标进入一级菜单时显示二级菜单，离开时隐藏。jQuery代码如下： ```javascript $(document).ready(function() { $('.dropdown-menu > li').hover( ...

jquery鼠标悬停滑动下拉菜单代码.zip

07-04

本资源“jquery鼠标悬停滑动下拉菜单代码.zip”提供了一种使用jQuery实现的蓝色风格下拉菜单解决方案，特别适用于那些希望增强用户体验的网站。 1. **jQuery简介**：jQuery是一个广泛使用的JavaScript库，它简化了...

HTML5 CSS3 鼠标悬停动画展开的二级菜单.rar

07-10

HTML5 CSS3 鼠标悬停动画展开的二级菜单，把你的鼠标放在菜单上，就可看到子菜单展开的动画效果了，十分好看漂亮。

通过HTML和CSS制作二级菜单栏

method_Wcs的博客

08-17

5059

我们在很多网站浏览时，通常会遇到很多二级菜单栏，通常它们是隐藏起来的，只有我们鼠标移过去后，它们才会显现出来，比如说下面这张图片。但是我们如何实现类似的效果呢？下面我们仅使用 HTML+ CSS来实现一个简单的二级菜单栏。 1.首先，我们先创建一级菜单。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-.

前端鼠标悬停显示二级菜单

最新发布

2301_77523055的博客

05-13

240

【代码】前端鼠标悬停显示二级菜单。

二级导航--鼠标悬浮菜单出现二级菜单

飞翔的熊blabla

08-28

3601

二级导航–鼠标悬浮菜单出现二级菜单 <!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>鼠标悬浮菜单出现二级菜单</title > <style> a{ color: #fff; text-dec

CSS 实现鼠标悬停上弹出二级菜单（一）

分享我的点点滴滴，在成长路上与你同行！

09-08

6559

效果: HTML页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; display: flex; ..

html鼠标悬停出现新元素,CSS：我如何将鼠标悬停在一个元素上，并显示另一个元素？...

weixin_29034963的博客

06-03

1848

我有一个导航面板，当您将鼠标悬停在灯具上时，它会显示从主导航面板下拉的面板中的前5个灯具。CSS：我如何将鼠标悬停在一个元素上，并显示另一个元素？我试图实现这个使用CSS与:hover。这是:hover IM的例子试图让：http://jsfiddle.net/EajKf/189/HTML：HomeFixturesManchester CityCSS：#nav li a.fixtures:hov...

HTML + CSS 实现悬浮菜单

Peanutfight的博客

03-11

862

HTML + CSS 实现悬浮菜单

使用HTML+CSS实现鼠标划过的二级菜单栏

Superman_xing的博客

05-21

2091

<html> <head> <meta charset="utf-8"> <style> body{ text-align:center; } .menuDiv{ border:1px solid #aac; overflow:hidden; display:inline-block; } .menuD...

html网页制作有二级导航菜单

12-29

以下是两种实现网页二级导航菜单的方法： 1. 使用纯CSS实现二级导航菜单： ```html <!DOCTYPE html> <html> <head> <style> /* 一级菜单样式 */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } /* 二级菜单样式 */ .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>二级导航菜单</h3> <p>将鼠标悬停在 "Dropdown" 上方，显示二级菜单。</p> </body> </html> ``` 2. 使用JavaScript实现二级导航菜单的动态显示与隐藏： ```html <!DOCTYPE html> <html> <head> <style> /* 一级菜单样式 */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } /* 二级菜单样式 */ .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> <script> // JavaScript代码实现二级菜单的动态显示与隐藏 function showDropdown() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" onclick="showDropdown()">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>二级导航菜单</h3> <p>将鼠标悬停在 "Dropdown" 上方，显示二级菜单。</p> </body> </html> ```