CSS ：悬停时同时显示和隐藏不同的div

在本文中，我们将介绍如何使用CSS来实现悬停时同时显示和隐藏不同的div。

阅读更多：CSS 教程

概述

CSS是一种用于描述和布局HTML文档的样式表语言。其中一个常见的需求是在鼠标悬停时同时显示和隐藏不同的div。通过使用CSS的:hover伪类选择器和display属性，我们可以轻松实现这个效果。

实现方法

要实现在悬停时显示和隐藏不同的div，我们需要使用CSS的:hover伪类选择器。:hover可以应用于任何HTML元素，当鼠标悬停在该元素上时，规定的样式将被应用。

下面是一个简单的示例，演示了如何通过悬停时显示和隐藏不同的div：

<style>
  .main-div {
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    margin-bottom: 20px;
    display: none;
  }

  .main-div:hover {
    display: block;
  }

  .sub-div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    margin: 20px;
  }
</style>

<div class="main-div">
  <div class="sub-div"></div>
</div>

在上面的示例中，我们使用了一个外部样式表（inline CSS）来定义两个重要的CSS类：.main-div和.sub-div。.main-div是我们要悬停时显示和隐藏的div的类，而.sub-div是我们要在.main-div中显示的div的类。

首先，我们将.main-div设置为display: none，将其隐藏起来。然后，在.main-div:hover的伪类选择器中，我们将其设置为display: block，当鼠标悬停在.main-div上时，该div将显示出来。

在.sub-div的样式中，我们设置了其宽度、高度和背景颜色，并对其进行了一些边距调整。

示例说明

让我们进一步探讨如何应用这个技术在实际项目中。

假设我们有一个图片墙，其中包含多个图片div。当鼠标悬停在某个图片上时，我们希望显示一个遮罩层和相关信息。

<style>
  .image-div {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: url("image.jpg");
    background-size: cover;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }

  .image-div:hover .overlay {
    display: block;
  }

  .info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
  }
</style>

<div class="image-div">
  <div class="overlay">
    <div class="info">This is a beautiful image</div>
  </div>
</div>

在上面的示例中，我们使用了position属性来设置div的定位方式。.image-div被设置为相对定位，而.overlay被设置为绝对定位。这样，我们可以将.overlay置于.image-div之上，并且.position: absolute可以使.overlay相对于.image-div进行定位。

首先，我们将.overlay设置为display: none，将其隐藏起来。然后，在.image-div:hover .overlay选择器中，我们将.overlay的display属性设置为block。这表明当鼠标悬停在.image-div上时，.overlay将显示出来。

在.info的样式中，我们设置了其定位、颜色和字体大小，使其显示为图片的相关信息。

通过这种方式，我们可以在鼠标悬停时显示和隐藏不同的div，并为每个div设置自己独特的样式。