在父元素上悬停时显示子元素 - 需要使用JavaScript吗？

Question

当鼠标悬停在父元素上时，我需要显示一个div（默认情况下子div是隐藏的）。这只能用JavaScript来实现吗？谢谢。

- Evanss

---

可能是纯CSS悬停显示另一个元素可能的重复问题？ - robertc

Answer 1

无需 JavaScript。

.hidden {
  display: none;
}

.parent:hover .hidden {
  display: block;
}

<div class="parent">
  <p>Hello, I'm a child...</p>
  <p class="hidden">..and so am I but I'm hidden.</p>
</div>

- Marcel

---

除了这是一个解决问题的好方法外，它还是如何写出简短、切入重点且具有自解释性代码的好例子，给它点赞。 - StubbornShowaGuy

刚把这个插入我的项目中，完美无缺地运行了。谢谢@Marcel。 - dannyk

Answer 2

@jdln; 是的

CSS：

.outer {
    background:red;
    height:100px;
}
.box1 {
    background:blue;
    height:100px;
    width:80px;
    display:none;
}
.outer:hover .box1{
    display:block;
    cursor:pointer;
}

查看代码片段：http://jsfiddle.net/sandeep/XLTV3/1/

- sandeep

Answer 3

使用jQuery，绝对没问题：

$("#some_parent").hover(function ()
{
    $(this).children("#some_child_div").show();
});

- Dormouse

Answer 4

除了接受的答案外，还可以使用opacity，这样布局在悬停时不会跳动（这还允许动画出现）：

css:

.show-on-hover-parent:hover .show-on-hover-item {
    opacity: 1;
   //transition: opacity .5s; //<- optional opacity animation
}

.show-on-hover-parent .show-on-hover-item {
    opacity: 0;
   //transition: opacity .5s; //<- optional opacity animation
}

html:

<div class="show-on-hover-parent">
    <div>Always visible 1</div>
    <div class="show-on-hover-item">visible on hover</div>
    <div>Always visible 2</div>
</div>

- vir us

Answer 5

我最初使用了上面的CSS解决方案，但是由于我的子div包含一个图像，导致鼠标悬停时出现闪烁，所以不得不使用jQuery。在这里，我们在鼠标进入时显示子元素（如果是桌面屏幕大小），并在鼠标离开时隐藏它，但仅在现在未悬停在主页面容器上时才隐藏，以最小化闪烁：

$(document).ready(function () {
    $(".parent-qtip").mouseenter(function () {
        if ($(window).width()>=1200)
            $(this).children(".child-qtip").show();
    });
    $(".parent-qtip").mouseleave(function () {
        if ($('.page-content').find('.container:hover').length)
            $('.child-qtip').hide();
    });
});

- boateng

Answer 6

使用 jQuery，您可以为父级 div 添加 mouseover 事件，并 show 子级 div。例如，请查看 this fiddle。

- James Allardice

Answer 7

由于它是子元素，您不需要使用JavaScript。这里是一个示例。

- Uphill_ What '1

Answer 8

在找到这些答案之前，我真的遇到了很大的麻烦。参考了Marcel的方法后，我终于让它正常工作了。

我的解决方案如下。

.sidenav {
  position: fixed;
  height: 100%;
  background-color: purple;
  font-size: x-large;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0px;
}
.nav-item {
  color: white;
  text-decoration: none;
  display: block;
  border-radius: 10px;
  margin: 5px;
  padding: 10px 5px;
  border: 1px transparent solid;
}
.nav-item:hover {
  background-color: orchid;
}
.nav-icon {
  vertical-align: middle;
}
.nav-item-title {
  margin: 0 10px;
  position: relative;
  top: 2px;
}
.fa-circle-question {
  position: relative;
  left: 2px;
}
.hidden {
  display: none;
}
.sidenav:hover .hidden {
  display: inline-block;
}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
/>
<nav class="sidenav">
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
    <h5 class="nav-item-title hidden">
      Medium string
    </h5>
  </div>
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-house"></i>
    <h5 class="nav-item-title hidden">
      Short
    </h5>
  </div>
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-circle-question"></i>
    <h5 class="nav-item-title hidden">
      Much much longer string
    </h5>
  </div>
</nav>

- Steven Gillies