CSS 使用纯CSS，在悬停在另一个元素上时显示div

在本文中，我们将介绍如何使用纯CSS来实现当鼠标悬停在另一个元素上时显示div的效果。这可以通过CSS选择器和伪类来实现，并且不需要任何JavaScript代码。

阅读更多：CSS 教程

1. 使用相邻兄弟选择器实现

相邻兄弟选择器(+)可以选择紧接在指定元素之后的兄弟元素。我们可以将要显示的div元素隐藏，并在鼠标悬停在特定元素上之后使用相邻兄弟选择器来显示。

<style>
    .container .hidden-div {
        display: none;
    }

    .container:hover + .hidden-div {
        display: block;
    }
</style>

<div class="container">鼠标悬停在此元素上</div>
<div class="hidden-div">要显示的div</div>

在上面的示例中，当鼠标悬停在class为container的元素上时，class为hidden-div的div将显示出来。

2. 使用子选择器实现

子选择器(>)可以选择某个元素的直接子元素。我们可以将要显示的div作为指定元素的子元素，并使用子选择器来控制其显示与隐藏。

<style>
    .container > .hidden-div {
        display: none;
    }

    .container:hover > .hidden-div {
        display: block;
    }
</style>

<div class="container">鼠标悬停在此元素上
    <div class="hidden-div">要显示的div</div>
</div>

在上面的示例中，当鼠标悬停在class为container的元素上时，class为hidden-div的div将显示出来。

3. 使用相邻兄弟选择器和伪元素实现

我们还可以结合使用相邻兄弟选择器和伪元素来实现此效果。首先，用伪元素(::after或::before)作为显示隐藏div的占位符，并使用相邻兄弟选择器来控制其显示与隐藏。

<style>
    .container {
        position: relative;
    }

    .container::after {
        content: "";
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: lightgray;
        padding: 10px;
    }

    .container:hover::after {
        display: block;
    }
</style>

<div class="container">鼠标悬停在此元素上</div>

在上面的示例中，当鼠标悬停在class为container的元素上时，通过伪元素::after显示出一个占位符，并且通过改变display属性的值来显示或隐藏真正的div。