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

Posted 2023-05-08

【中文标题】如何让元素在父级悬停时显示？

【英文标题】：How to get element to display on hover of parent?

【发布时间】：2019-03-06 23:55:39

【问题描述】：

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

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

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 来获得我需要的东西。

【参考方案1】：

悬停停止的原因是在#onelis 下方有一个间隙，没有任何东西可以悬停。将.one top:85px; 更改为.one padding-top:15px; 或适当的数量以允许将鼠标悬停在上面。

另外，如果你想微调从顶部开始的距离，你可以使用padding-top和top的组合，例如.onepadding-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>

【讨论】：

我已经用屏幕截图更新了问题，说明使用padding-top 时会发生什么。甚至尝试添加margin-top，但没有奏效。

在我的回答中，padding-top 必须是 85 而不是像 15 这样的小东西有什么特别的原因吗？您可以单击“运行代码 sn-p”按钮来查看我的答案产生的结果。

在检查不同的浏览器时，我们发现85是我们需要的数字。菜单还需要为二级菜单 (child) 元素提供背景，这使其复杂化。

请编辑您的问题以更能描述您的问题。 “我们需要 85，但 85 太多了”对答案没有帮助。

您的回答导致了解决方案。我在<div class="one"> 周围添加了一个包装类，其中padding-top 引用了<div class="menu__wrapper">。

【参考方案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。

【讨论】：

我们尝试过这个，但是当我们将鼠标悬停在当前选定的元素之外（例如第一个）时，就会出现突出显示的问题。