Question

当您将鼠标悬停在“关于”项上时，导航栏中会显示一个子菜单。

我在CSS中将此子菜单设置为display: none;。

我希望这样，将其悬停更改为display:block;时，不透明度属性会转换为opacity: 1，从而创建动画效果。

如果元素的display属性也发生变化，是否无法为其设置动画。

Codepen：https://codepen.io/emilychews/pen/eqOypV

li {list-style: none}

.nav-menu-items {display: flex}

.menu-item {padding: 1rem}

.submenu {
  padding: 1rem;
  background: lightblue;
  position: absolute;
  top: 4rem;
    display: none;
    opacity: 0;
}

li:hover .submenu {
  display: block;
  opacity: 1;
  transition: opacity 1s ease-in
}

<ul class="nav-menu-items">
  <li class="menu-item menu-item-3">HOME</li>
  <li class="menu-item menu-item-2">ABOUT
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Our Team</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-3"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-4"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-5"><a class="td navigation--link">STUFF</a></li>
</ul>

非常感谢

添加具有显示属性的不透明度动画-CSS

0 个答案: