Question

我们有一个菜单，使用<ul>显示菜单（请参阅代码销）。当.one类设置为position: absolute时，当我们移动鼠标时，不再显示该类的元素。

当父项（.one元素）具有<li>处于活动状态时，如何使:hover显示在菜单下方？

Codepin example

我们还尝试将top:85px切换为padding-top: 85px，我们发现当子元素具有背景色时，会添加很多填充。

预期行为：

将鼠标悬停在第一个位置时，子元素<div class="one">在下方应与容器的左侧对齐。
将鼠标悬停在第二秒时，子元素<div class="one">在下方应与容器的左侧对齐。
保留position: absolute类中的.one属性。

当前问题：

所需结果：

期望<div class="one">将显示在first，second或third菜单链接的下方。

更新：

使用@Ruzihm提供的解决方案，我能够提出此解决方案(codepin)，在其中添加了<div class="menu__wrapper">，然后使用padding-top来获得所需的内容。

Answer 1

悬停停止的原因是在#one li s下方有一个没有悬停空间的空隙。将.one {top:85px;}更改为.one {padding-top:15px;}或适当的数量以允许将某些内容悬停在上面。

此外，如果您想微调距填充开始处的距离，请使用padding-top和top的组合，例如.one{padding-top:25px;top:60px}，以便下拉内容从顶部开始85px。

$(function() {
  $('li#one').hover(function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#' + el_link + '.' + el_id;

    $(el_sel).toggleClass('is-active');
  });
});

.menu__container {
  margin: 0 auto;
  padding: 10px;
}

.two {
  display: none;
}

.is-active {
  display: block;
}

.one {
  display: none;
  top: 60px;
  padding-top: 25px;
  position: absolute;
  background: #777;
}

li#one>a {
  padding: 10px;
  background-color: #eee;
}

.menu__first {
  background-color: #eee;
}

#one:hover>div.one {
  display: block;
}

#one {
  float: left;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu__container">
  <ul class="menu__first">
    <li id="one">
      <a href="#"> first</a>
      <div class="one">
        <ul>
          <li data-at="some-link" id="two">
            <a href="#"> some</a>
          </li>
          <li data-at="path-link" id="two">
            <a href="#"> path</a>
          </li>
          <li data-at="another-one" id="two">
            <a href="#"> another one</a>
          </li>
        </ul>
        <div class="dropdown">
          <div class="two" id="some-link">some link text</div>
          <div class="two" id="path-link">path link</div>
          <div class="two" id="another-one">another one</div>
        </div>
      </div>
    </li>
    <li id="one">
      <a href="#"> second</a>
      <div class="one">
        <ul>
          <li>
            <a href="#"> another some</a>
          </li>
          <li>
            <a href="#"> another path</a>
          </li>
        </ul>
      </div>
    </li>
    <li id="one">
      <a href="#"> third</a>
      <div class="one">
        <ul>
          <li>
            <a href="#"> third some</a>
          </li>
          <li>
            <a href="#"> third path</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Answer 2

这是最简单的方法。

考虑以下HTML：

<div classname="parent">
  <div classname="child">...</div>
</div>

您有一个父div，其中的div包含任意数量的子代。

与此CSS结合：

.parent { ... }
.child { display: none; ... }
.parent:hover .child { display: block; ... }

您可以在父级上设置任何样式。
以及您希望在子级上使用的任何样式，包括display: block都可以将其隐藏在视图中。
然后，您设置一个针对子div的CSS选择器，当悬停了父 时，将子设置为display: block，将显示该子。 / li>

在这里，我们使用display属性和值block和none，但是您可以使用任何先隐藏然后显示元素的CSS规则。一些示例属性：block，visibility，opacity。

如何使元素显示在父悬停时？

更新：

2 个答案: