悬停列表项时菜单消失
Posted
技术标签:
【中文标题】悬停列表项时菜单消失【英文标题】：menu disappear when hover the list item 【发布时间】：2020-11-21 22:11:29 【问题描述】：当我在 1000 像素模式下将鼠标悬停在汉堡图标上时，菜单会出现，但是当我将鼠标悬停在菜单上时，它会消失。我已经尝试过 z-index 和与位置相关的技巧，但无法获得解决方案。 问题在于 1000 像素，因为在全屏模式下我可以将鼠标悬停在子菜单上，但不能在 1000 像素屏幕上。 请帮忙，谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
<a href="#">Sports Programming</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Boxing</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Fina</a></li>
<li><a href="#">World Athletics</a></li>
<li><a href="#">Ncaa</a></li>
<li><a href="#">Pocker</a></li>
<li><a href="#">Special Olympics</a></li>
<li><a href="#">X Games</a></li>
</ul>
</li>
<li class="navbar__hover__items"><a href="#">Content Calender</a></li>
<li class="navbar__hover__items">
<a href="#">Contacts</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Asia Pacific</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Europe, Middle East and Africa</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Mexico</a></li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
html
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
body
font-size: 1.6rem;
.header
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
.header__logo
font-size: 20px;
line-height: 50px;
user-select: none;
.header__logo span
font-style: oblique;
.navbar__items
display: flex;
justify-content: center;
align-items: stretch;
.navbar__lists__items
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
.navbar__lists__items > li
margin: 0 5px;
.navbar__lists__items__item
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
.navbar__lists__items__item li
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
.navbar__lists__items__item li a:hover
background-color: #666666;
color: #fff;
.navbar__lists__items__item li a
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
.navbar__hover__items
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
.navbar__hover__items > a
margin-right: 5px;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: ' \02C5';
.navbar__lists__items > li > a
text-decoration: none;
color: #fff;
text-transform: uppercase;
.navbar__hover__items:nth-child(2n+1):hover > a
background-color: #fff;
color: rgb(202, 8, 19);
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
.search
position: relative;
display: flex;
justify-content: center;
align-items: center;
.search input
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
.search i
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
.video__section
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
.video__header__wrapper
width: 100%;
height: 100%;
.video__header__wrapper video
width: 100%;
height: 100%;
.video__section__content
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
.video__section__content span
font-style: oblique;
.image__section
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
.image__section .image
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
.image__section .image img
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
.overlay
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
.image:hover img
transform: scale(1);
.image:hover > .overlay
height: 100%;
bottom: 0;
.copyright__section
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
.copyright__section__content
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
@media (max-width: 1000px)
.header
padding: 0 10px;
.navbar__items
position: relative;
.navbar__lists__items
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
.navbar__lists__items > li > a
color: #000;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: "";
display: block;
.navbar__hover__items
display: block;
color: #000;
.navbar__lists__items__item
display: none;
.video__section
font-size: 35px;
.search
height: 50px;
.hamburger__icon__section
display: flex;
justify-content: flex-end;
flex: 2;
.hamburger__icon
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
.hamburger__icon > div
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
.hamburger__icon:hover + .navbar__lists__items
display: block;
【问题讨论】：
【参考方案1】：您可以使用 javascript 而不是 css 来处理显示/隐藏，因为当浏览器检测到您的光标不再位于 hamburger_buttton 顶部时，您现在执行此操作的方式将隐藏您的菜单，因此最好而是通过单击来处理事件。或者您可以查看this answer。希望对您有所帮助。
let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');
hamburgetButton.onclick = function ()
navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
html
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
body
font-size: 1.6rem;
.header
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
.header__logo
font-size: 20px;
line-height: 50px;
user-select: none;
.header__logo span
font-style: oblique;
.navbar__items
display: flex;
justify-content: center;
align-items: stretch;
.navbar__lists__items
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
.navbar__lists__items>li
margin: 0 5px;
.navbar__lists__items__item
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
.navbar__lists__items__item li
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
.navbar__lists__items__item li a:hover
background-color: #666666;
color: #fff;
.navbar__lists__items__item li a
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
.navbar__hover__items
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
.navbar__hover__items>a
margin-right: 5px;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: ' \02C5';
.navbar__lists__items>li>a
text-decoration: none;
color: #fff;
text-transform: uppercase;
.navbar__hover__items:nth-child(2n+1):hover>a
background-color: #fff;
color: rgb(202, 8, 19);
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
.search
position: relative;
display: flex;
justify-content: center;
align-items: center;
.search input
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
.search i
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
.video__section
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
.video__header__wrapper
width: 100%;
height: 100%;
.video__header__wrapper video
width: 100%;
height: 100%;
.video__section__content
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
.video__section__content span
font-style: oblique;
.image__section
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
.image__section .image
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
.image__section .image img
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
.overlay
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
.image:hover img
transform: scale(1);
.image:hover>.overlay
height: 100%;
bottom: 0;
.copyright__section
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
.copyright__section__content
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
@media (max-width: 1000px)
.header
padding: 0 10px;
.navbar__items
position: relative;
.navbar__lists__items
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
.navbar__lists__items>li>a
color: #000;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: "";
display: block;
.navbar__hover__items
display: block;
color: #000;
.navbar__lists__items__item
display: none;
.video__section
font-size: 35px;
.search
height: 50px;
.hamburger__icon__section
display: flex;
justify-content: flex-end;
flex: 2;
.hamburger__icon
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
.hamburger__icon>div
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon">
<div></div>
<div></div>
<div></div>
</div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
<a href="#">Sports Programming</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Boxing</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Fina</a></li>
<li><a href="#">World Athletics</a></li>
<li><a href="#">Ncaa</a></li>
<li><a href="#">Pocker</a></li>
<li><a href="#">Special Olympics</a></li>
<li><a href="#">X Games</a></li>
</ul>
</li>
<li class="navbar__hover__items"><a href="#">Content Calender</a></li>
<li class="navbar__hover__items">
<a href="#">Contacts</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Asia Pacific</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Europe, Middle East and Africa</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Mexico</a></li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>【讨论】：
我想做这种css方式，不过还是谢谢你的回答！【参考方案2】：只需将其添加到您的选择器：
, .navbar__lists__items:hover
完整的规则应该是这样的：
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover
display: block;
【讨论】：
【参考方案3】：发生这种情况是因为悬停效果的范围仅限于汉堡图标，一旦悬停范围离开，css 就不会为其执行，因此为了稳定菜单项，我添加了悬停范围<ul> 也是。
*
margin: 0;
padding: 0;
box-sizing: border-box;
html
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
body
font-size: 1.6rem;
.header
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
.header__logo
font-size: 20px;
line-height: 50px;
user-select: none;
.header__logo span
font-style: oblique;
.navbar__items
display: flex;
justify-content: center;
align-items: stretch;
.navbar__lists__items
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
.navbar__lists__items > li
margin: 0 5px;
.navbar__lists__items__item
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
.navbar__lists__items__item li
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
.navbar__lists__items__item li a:hover
background-color: #666666;
color: #fff;
.navbar__lists__items__item li a
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
.navbar__hover__items
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
.navbar__hover__items > a
margin-right: 5px;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: ' \02C5';
.navbar__lists__items > li > a
text-decoration: none;
color: #fff;
text-transform: uppercase;
.navbar__hover__items:nth-child(2n+1):hover > a
background-color: #fff;
color: rgb(202, 8, 19);
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
.search
position: relative;
display: flex;
justify-content: center;
align-items: center;
.search input
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
.search i
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
.video__section
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
.video__header__wrapper
width: 100%;
height: 100%;
.video__header__wrapper video
width: 100%;
height: 100%;
.video__section__content
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
.video__section__content span
font-style: oblique;
.image__section
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
.image__section .image
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
.image__section .image img
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
.overlay
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
.image:hover img
transform: scale(1);
.image:hover > .overlay
height: 100%;
bottom: 0;
.copyright__section
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
.copyright__section__content
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
@media (max-width: 1000px)
.header
padding: 0 10px;
.navbar__items
position: relative;
.navbar__lists__items
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
.navbar__lists__items > li > a
color: #000;
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after
content: "";
display: block;
.navbar__hover__items
display: block;
color: #000;
.navbar__lists__items__item
display: none;
.video__section
font-size: 35px;
.search
height: 50px;
.hamburger__icon__section
display: flex;
justify-content: flex-end;
flex: 2;
.hamburger__icon
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
.hamburger__icon > div
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
/* added another line here */
.hamburger__icon:hover + .navbar__lists__items,
.hamburger__icon + .navbar__lists__items:hover
display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
<a href="#">Sports Programming</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Boxing</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Fina</a></li>
<li><a href="#">World Athletics</a></li>
<li><a href="#">Ncaa</a></li>
<li><a href="#">Pocker</a></li>
<li><a href="#">Special Olympics</a></li>
<li><a href="#">X Games</a></li>
</ul>
</li>
<li class="navbar__hover__items"><a href="#">Content Calender</a></li>
<li class="navbar__hover__items">
<a href="#">Contacts</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Asia Pacific</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Europe, Middle East and Africa</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Mexico</a></li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" >
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>【讨论】：
以上是关于悬停列表项时菜单消失的主要内容，如果未能解决你的问题，请参考以下文章