代码之家 › 专栏 › 技术社区 › usernameabc

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

menu drop-down-menu css jquery

usernameabc · 技术社区 · 6 年前

<ul> (请参阅codepin)。当 .one 类设置为 position: absolute

我们怎样才能得到 一号 <li> 元素)具有 :hover

Codepin example

我们也试着换了 top:85px 到 padding-top: 85px ,我们发现当子元素有背景色时,会添加大量填充。

预期行为:

悬停在第一个元素上时,子元素 <div class="one"> 应在容器左侧对齐的下方可见。
悬停在第二位时,子元素 <div class=“one”>
保持 位置:绝对 一号 班级。

预期结果:

期望是 < 将显示在 first , second ,或 third 菜单链接。

更新:

(codepin) <div class="menu__wrapper"> 然后使用 padding-top

2 回复 | 直到 6 年前

Ruzihm aks786 6 年前

悬停停止的原因是在悬停点下方有一个间隙 #one li 在那里没有什么可以悬停的。改变 .one {top:85px;} .one {padding-top:15px;} 或者数量是适当的,以允许有东西悬停。

另外,如果您想微调从顶部开始填充的距离,可以使用 padding-top 和 top .one{padding-top:25px;top:60px} 因此,下拉内容从顶部的85像素开始。

$(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>

Jeffpowrs 6 年前

这是最简单的方法。

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

您有一个父div,它用任意数量的子div包围子div。

再加上这个CSS:

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

display: block 从视图中隐藏该元素的元素。
然后设置一个以子div为目标的CSS选择器父对象悬停 让孩子 显示:块 给孩子看。

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