父级盒子鼠标悬停显示子级

要实现这个效果，可以使用CSS中的:hover伪类和子元素选择器。具体步骤如下：

1. 在父级盒子中添加一个子级盒子；
2. 设置子级盒子为display:none，使其默认不显示；
3. 使用:hover伪类选择器，当鼠标悬停在父级盒子上时，将子级盒子的display设置为block，使其显示出来。

具体的代码示例如下：

HTML代码：

<div class="parent-box">
  <p>父级盒子</p>
  <div class="child-box">
    <p>子级盒子</p>
  </div>
</div>

CSS代码：

.parent-box {
  position: relative; /* 父级盒子要设置为相对定位 */
}

.child-box {
  display: none; /* 子级盒子默认不显示 */
  position: absolute; /* 子级盒子要设置为绝对定位 */
  top: 100%; /* 子级盒子距离父级盒子顶部的距离 */
  left: 0; /* 子级盒子距离父级盒子左侧的距离 */
}

.parent-box:hover .child-box {
  display: block; /* 当父级盒子悬停时，子级盒子显示 */
}

相关问题

Html盒子鼠标悬停怎么做

可以通过CSS中的:hover伪类来实现HTML盒子鼠标悬停的效果。具体实现方法如下：
1. 首先，在HTML中创建一个盒子，例如<div>标签。
2. 在CSS中设置该盒子的样式，例如设置宽度、高度、背景颜色等。
3. 使用:hover伪类来设置鼠标悬停时的样式，例如设置背景颜色、边框颜色等。
4. 可以通过CSS3中的transform属性来实现鼠标悬停时的动画效果，例如设置旋转、缩放等。

举个例子，如果想要实现鼠标悬停时盒子凸起放大的效果，可以按照以下步骤进行设置：
1. 在HTML中创建一个<div>标签，例如<div class="box">。
2. 在CSS中设置.box的样式，例如设置宽度、高度、背景颜色等。
3. 使用:hover伪类来设置鼠标悬停时的样式，例如设置背景颜色、边框颜色等，并使用transform属性来设置旋转、缩放等动画效果。
4. 保存HTML和CSS文件，并在浏览器中打开HTML文件，即可看到鼠标悬停时盒子凸起放大的效果。

css导航条鼠标悬停盒子高亮显示

可以使用CSS的:hover伪类选择器为导航条中的每个盒子设置鼠标悬停效果。具体做法如下：

1. 给每个导航条盒子添加一个共同的class（例如.nav-box）。
2. 在CSS中使用.nav-box:hover选择器，为鼠标悬停时的状态设置样式。
3. 在:hover选择器中设置盒子的背景色或者边框等样式，来实现高亮效果。

示例CSS代码：

.nav-box:hover {
  background-color: #fff; /* 设置背景色 */
  border: 1px solid #000; /* 设置边框 */
}

这样，在鼠标悬停时，导航条中每个盒子都会显示高亮效果。