Question

我正在尝试制作一组html + css悬停框。这些类似于下拉菜单。

所需的行为是，当用户将鼠标悬停在一个框上时，另一个框向下滚动到第一个框上。

现在，这些框出现在文本上方并响应样式，但是我似乎无法触发过渡效果。

我尝试使用以下代码转换max-height css属性：

<div id="boxbar">
      <ul id="boxbar-table">
        <li class="boxbar-col boxbar-col-left" id="boxbar-col-1">
          Services <i class="fas fa-angle-down"></i>
          <ul class='boxbar-rollover'>
            <li><a href="#">Web Development</a></li>
          </ul>
        </li>
        <li class="boxbar-col boxbar-col-right" id="boxbar-col-2">
          Services <i class="fas fa-angle-down"></i>
          <ul class='boxbar-rollover'>
            <li><a href="#">Web Development</a></li>
          </ul>
        </li>
      </ul>
    </div>

这是CSS：

/* Hide nested ul by default */

#boxbar ul li:hover {
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
}

#boxbar ul li:hover a {
  color: #fff;
}

#boxbar ul li ul {
  display: none;
}
#boxbar ul li ul li {
  max-height: 0;
  transition: max-height 2s;
}

/* Nested dropdown show */
#boxbar ul li:hover ul {
  display: block;
  position: absolute;
  left: -100px;
  top: -258px;
  width: 200%;
  margin-top: 1rem;
}
#boxbar ul .boxbar-col-left:hover ul {
  left: 0;
}
#boxbar ul .boxbar-col-right:hover ul {
  left: -100%;
}

#boxbar ul li:hover ul li {
  z-index: 10;
  display: block;
  background: #e9e9e8;
  max-height: 302px;
}

这是github上的完整代码。 https://github.com/twheelertech/boxbar

这将调整最大高度，但高度不会在悬停时过渡。我已尝试将父ul作为目标，但无法正常工作。

我希望第二个框向下滚动。

我该怎么做？我需要更改html结构吗？

如何使用CSS Hoverbox制作过渡动画？

0 个答案: