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

Question

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

当父级（<li> 元素）将:hover 激活时，我们如何让.one 显示在菜单下方？

Codepin example

我们也尝试过将top:85px切换为padding-top: 85px，我们发现当子元素有背景色时会添加很多内边距。

预期行为：

1. 在第一个悬停时，子元素<div class="one"> 应该在容器左侧对齐下方可见。
2. 在第二个悬停时，子元素<div class="one"> 应该在容器左侧对齐下方可见。
3. 将position: absolute 属性保留在.one 类中。

当前问题：

期望的结果：

1. 预计<div class="one"> 将显示在first、second 或third 菜单链接下方。

更新：

使用@Ruzihm 提供的解决方案，我想出了这个解决方案(codepin)，我在其中添加了<div class="menu__wrapper">，然后使用padding-top 来获得我需要的东西。

Answer 1

悬停停止的原因是在#onelis 下方有一个间隙，没有任何东西可以悬停。将.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 隐藏该元素的样式。
• 然后，您设置一个 CSS 选择器，该选择器以子 div 父级悬停为目标，并将子级设置为 display: block，这将显示子级。

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