为什么当我将鼠标悬停在元素上不起作用？

Question

我有一个列表，我给它一个top: -500%来隐藏它，当我把鼠标悬停在另一个元素上时，我给它一个top: 100%来再次显示，但它不起作用?请帮忙

.nav-bar .top {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
position: absolute;
top: -500%;
left: 0;
width: 100%;
background: rgb(238 238 238 / 88%);
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.icon:hover .top {
top: 100%;
}

<div class="nav-bar">
<ul class="top">
<li><a href="#home">home<span></span></a></li>
<li><a href="#about">about<span></span></a></li>
<li><a href="#services">services<span></span></a></li>
<li><a href="#portfolio">portfolio<span></span></a></li>
<li><a href="#pricing">pricing<span></span></a></li>
<li><a href="#experience">experience<span></span></a></li>
</ul>
</div>
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>

Answer 1

.icon:hover .top将无法工作，因为。topdiv不是。icondiv的子div。您可以将图标div放在。topdiv之上并使用相邻的兄弟组合符或使用:has伪类(但注意这在firefox中不起作用(目前!))。注意，我还在.icondiv中添加了一些文本，让您可以悬停在上面。我还调整了:hover顶部声明

W3schools有一个很好的CSS选择器介绍

使用相邻兄弟组合子:

.nav-bar .top {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
position: absolute;
top: -100%;
left: 0;
right: 0;
background: rgb(238 238 238 / 88%);
transition: top 1s;
}
.icon:hover + .nav-bar .top {
top: 10%;
}
.icon {
cursor: pointer;
}

<div class="icon">
<span>Hover</span>
<span>Over</span>
<span>Me</span>
</div>
<div class="nav-bar">
<ul class="top">
<li><a href="#home">home<span></span></a></li>
<li><a href="#about">about<span></span></a></li>
<li><a href="#services">services<span></span></a></li>
<li><a href="#portfolio">portfolio<span></span></a></li>
<li><a href="#pricing">pricing<span></span></a></li>
<li><a href="#experience">experience<span></span></a></li>
</ul>
</div>

使用:has()伪类

.nav-bar .top {
display:flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
position: absolute;
top: -100%;
left: 0;
right: 0;
height: 0;
background: rgb(238 238 238 / 88%);
transition: top 0.5s;
}
body:has(.icon:hover) .top {
top:10%;
}
.icon {
cursor:pointer;
}

<div class="nav-bar">
<ul class="top">
<li><a href="#home">home<span></span></a></li>
<li><a href="#about">about<span></span></a></li>
<li><a href="#services">services<span></span></a></li>
<li><a href="#portfolio">portfolio<span></span></a></li>
<li><a href="#pricing">pricing<span></span></a></li>
<li><a href="#experience">experience<span></span></a></li>
</ul>
</div>
<div class="icon">
<span>Hover</span>
<span>Over</span>
<span>Me</span>
</div>