CSS 在父元素的鼠标悬停下显示子元素 – 是否需要使用JavaScript

在本文中，我们将介绍如何使用纯CSS实现在父元素的鼠标悬停下显示子元素的效果。通常情况下，我们可以通过使用:hover伪类选择器来实现这一效果，而不需要借助JavaScript。

阅读更多：CSS 教程

使用CSS :hover伪类选择器

在CSS中，:hover伪类选择器用于选取鼠标悬停状态下的元素，而不需要使用JavaScript来处理悬停事件。我们可以简单地使用:hover伪类选择器来设置父元素的样式，以及定义显示/隐藏子元素的规则。

以下是一个示例：

<style>
.parent {
  background-color: #f0f0f0;
}

.child {
  display: none;
}

.parent:hover .child {
  display: block;
}
</style>

<div class="parent">
  我是父元素
  <div class="child">
    我是子元素
  </div>
</div>

在上面的示例中，我们定义了一个父元素和一个子元素，并使用CSS设置了它们的样式。父元素的背景色为#f0f0f0，而子元素的默认显示为none，即隐藏状态。然后，当鼠标悬停在父元素上时，通过.parent:hover .child选择器选择到子元素，将其display属性设置为block，即显示状态。这样，当鼠标悬停在父元素上时，子元素就会显示出来。

需要JavaScript的情况

虽然大部分情况下使用:hover伪类选择器就足够实现在父元素的鼠标悬停下显示子元素的效果，但有时候我们可能需要借助JavaScript来处理一些特殊的需求。

例如，如果我们希望在鼠标悬停时，子元素具有一些动画效果或复杂的交互行为，就可能需要使用JavaScript。另外，在一些较老的浏览器中，可能存在对:hover伪类选择器的支持不完整或bug的情况，此时也可以考虑使用JavaScript来解决兼容性问题。

以下是一个示例，展示如何通过JavaScript来实现鼠标悬停下显示子元素的效果：

<style>
.parent {
  background-color: #f0f0f0;
}

.child {
  display: none;
}
</style>

<script>
document.querySelector('.parent').addEventListener('mouseenter', function() {
  document.querySelector('.child').style.display = 'block';
});

document.querySelector('.parent').addEventListener('mouseleave', function() {
  document.querySelector('.child').style.display = 'none';
});
</script>

<div class="parent">
  我是父元素
  <div class="child">
    我是子元素
  </div>
</div>

在上面的示例中，我们通过JavaScript为父元素添加了mouseenter和mouseleave事件的监听器。当鼠标进入父元素时，即触发mouseenter事件，我们将子元素的display属性设置为block，使其显示出来；而当鼠标离开父元素时，即触发mouseleave事件，我们将子元素的display属性设置为none，使其隐藏起来。