html 为什么当我悬停在元素上时不起作用？[duplicate]

5jvtdoz2 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(150)

此问题在此处已有答案：

（9个答案）
Is there a "previous sibling" selector?（29个答案）
12小时前关门了。
我列了个单子，我给予它一个顶：-500%来隐藏它，当我悬停在另一个元素上时，我给予它一个顶部：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>

Html

来源：https://stackoverflow.com/questions/74816144/why-when-i-hover-on-element-doesnt-work

1条答案

按热度按时间

6za6bjd01#

.icon:hover .top不起作用，因为.top div不是.icon div的子项。您可以将icon div放在.top div之上并使用adjacent sibling combinator，或者使用:has伪类（但请注意，这在firefox中还不起作用！）。注意，我还在.icon div中添加了一些文本，给予您可以将鼠标悬停在上面。我还调整了：hover top声明
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（）伪类
一个二个一个一个

赞(0）回复(0）举报 2022-12-16

我来回答

html 为什么当我悬停在元素上时不起作用？[duplicate]

1条答案

相关问题

热门标签

最新问答