如何解决为什么悬停效果可以在不将鼠标悬停在悬停文本上的情况下工作？
我创建了一个下拉菜单。在这里，我的问题出在作品集部分。当我将鼠标悬停在投资组合上时，会出现一个下拉菜单。然后当我将鼠标悬停在第一个下拉菜单文本上时，应该会出现另一个子下拉菜单，但这里其他下拉菜单的所有子下拉菜单都一个一个出现。
另一个问题出现在联系人部分。在这里，问题是如果我在每个下拉菜单之间使用一个小的下边距，然后在“联系人”文本上悬停后，下拉图标就会出现，当我将鼠标从文本移动到下拉图标时，下拉菜单消失了。
这是我的完整代码：
/* menu part */
.menu {
text-align: center;
}
.menu ul {
list-style: none;
}
.menu ul li {
display: inline-block;
background: #545454;
color: white;
padding: 15px 55px;
margin-left: -5px;
border-left: 1px solid black;
font-family: 'Balsamiq Sans',cursive;
font-size: 18px;
position: relative;
}
.menu ul li i {
position: relative;
right: 10px;
}
.menu ul li:hover {
background-color: rgb(216,49,49);
transition: .8s;
cursor: pointer;
}
/* dropdown menu part */
/* contact part */
.menu ul li .contact {
position: absolute;
left: 38px;
top: 100%;
width: 0px;
display: inline-block;
padding: 0;
}
.menu ul li .contact li {
width: 0px;
display: inline-block;
line-height: 16px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
}
.menu ul li .contact li i {
font-size: 50px;
position: relative;
top: 0px;
right: 25px;
}
.menu ul li .contact li:first-child:hover {
background-color: royalblue;
}
.menu ul li .contact li:nth-child(2):hover {
background-color: rgb(190,201,37);
}
.menu ul li .contact li:nth-child(3):hover {
background-color: rgb(228,22,22);
}
.menu ul li .contact li:nth-child(4):hover {
background-color: rgb(1,130,250);
}
.menu ul li .contact li:last-child:hover {
background-color: rgb(66,110,241);
}
.menu ul li:hover ul li {
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaleY(1);
cursor: pointer;
}
/* portfolio part */
.menu ul li .portfolio {
position: absolute;
top: 100%;
left: 0px;
padding: 0;
margin-left: 5px;
}
.menu ul li .portfolio li {
width: 84px;
position: relative;
}
.menu ul li .portfolio li ul {
position: absolute;
left: 100%;
top: 0px;
padding: 0;
}
.menu ul li .portfolio li ul li {
visibility: hidden;
opacity: 0;
margin-left: 0px;
transform: scaleX(0);
transform-origin: center;
}
.menu ul li .portfolio li:hover ul li {
visibility: visible;
opacity: 1;
transform: scaleX(1);
transition: .8s;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<link rel="stylesheet" href="./dropdown menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-female"></i>About</li>
<li><i class="fas fa-user-edit"></i>Contact
<ul class="contact">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</li>
<li><i class="fab fa-wordpress-simple"></i>Portfolio
<ul class="portfolio">
<li>Work no 1
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 2
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 3
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 4
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 5
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fas fa-sign-in-alt"></i>Login</li>
</ul>
</div>
</body>
</html>解决方法
因为你没有使用经典的 display:none/block ，你的隐藏元素在这里使用作为父元素一部分的空间。当您悬停这些空间时，您将悬停父级 .. :hover 已应用。
为了避免 display:none/block;，您可以在 ul 子节点上使用 pointer-events:none/auto;。
这是您的代码示例。
/* menu part */
.menu {
text-align: center;
}
.menu ul {
list-style: none;
}
.menu ul li {
display: inline-block;
background: #545454;
color: white;
padding: 15px 55px;
margin-left: -5px;
border-left: 1px solid black;
font-family: 'Balsamiq Sans',cursive;
font-size: 18px;
position: relative;
}
.menu ul li i {
position: relative;
right: 10px;
}
.menu ul li:hover {
background-color: rgb(216,49,49);
transition: .8s;
cursor: pointer;
}
/* dropdown menu part */
/* contact part */
.menu ul li .contact {
position: absolute;
left: 38px;
top: 100%;
display: inline-block;
padding: 0;
}
.menu ul li .contact li {
width: 0px;
display: inline-block;
line-height: 16px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
transform: scaleY(0) translate(-1em);
transform-origin: top;
}
.menu ul li .contact li ul {
/* added */ pointer-events: none;
}
.menu ul li .contact li i {
font-size: 50px;
position: relative;
top: 0px;
right: 25px;
}
.menu ul li .contact li:first-child:hover {
background-color: royalblue;
}
.menu ul li .contact li:nth-child(2):hover {
background-color: rgb(190,201,37);
}
.menu ul li .contact li:nth-child(3):hover {
background-color: rgb(228,22,22);
}
.menu ul li .contact li:nth-child(4):hover {
background-color: rgb(1,130,250);
}
.menu ul li .contact li:last-child:hover {
background-color: rgb(66,110,241);
}
.menu ul li:hover .contact li {
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaleY(1) translate(-1em);
cursor: pointer;
}
.menu ul li:hover ul {
/* added */ pointer-events: auto;
}
/* portfolio part */
.menu ul li .portfolio {
position: absolute;
top: 100%;
left: 0px;
padding: 0;
margin-left: 5px;
}
.menu ul li .portfolio li {
width: 84px;
position: relative;
}
.menu ul li .portfolio li ul {
position: absolute;
left: 100%;
top: 0px;
padding: 0;
/* added */ pointer-events: none;
}
.menu ul li .portfolio li ul li {
visibility: hidden;
opacity: 0;
margin-left: 0px;
transform: scaleX(0);
transform-origin: center;
}
.menu ul li .portfolio li:hover ul li {
visibility: visible;
opacity: 1;
transform: scaleX(1);
transition: .8s;
/* added */ pointer-events: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<link rel="stylesheet" href="./dropdown menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-female"></i>About</li>
<li><i class="fas fa-user-edit"></i>Contact
<ul class="contact">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</li>
<li><i class="fab fa-wordpress-simple"></i>Portfolio
<ul class="portfolio">
<li>Work no 1
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 2
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 3
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 4
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 5
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fas fa-sign-in-alt"></i>Login</li>
</ul>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
