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

Question

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

我们怎样才能得到 .one当父级(<li> 元素)有:hover 时显示在菜单下方一样活跃？

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

悬停停止的原因是 #one li 下方有一个间隙，没有任何东西可以悬停。将 .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>