悬停：显示不显示 div答案

【问题标题】：hover: display not showing a div悬停：显示不显示 div
【发布时间】：2016-02-21 06:24:34
【问题描述】：

我写这个代码：jsfiddle.net/4ror198u/1/

那个僵尸类没问题，当我的鼠标移到它上面时，它会显示那个粉红色的盒子，但是为什么当我的鼠标移到蓝色时我看不到绿色类？你能帮我解决我的问题吗？我需要做些什么来解决这个问题，还可以举一些例子说明为什么这件事会发生，以及如何在功能中防止它发生。提前谢谢！ :)

【问题讨论】：

那些 JS 评论是老兄吗？
我只想使用 HTML 和 CSS。没有js。我知道它可以用 js 完成，但我不想使用它。我只是想回答为什么我的绿色 div 在鼠标悬停在蓝色 div 上时没有出现在蓝色上（在蓝色上）。
您在.playerCover 上有一个悬停伪类，但您没有将该类应用于任何元素。因此，绿色永远不会显示，因为您从未使用过 .playerCover
@Smeegs 即使在编辑之后仍然没有出现：/ jsfiddle.net/4ror198u/1
你还没有使用这个类。使用 shell 代替 playercover。像这样：jsfiddle.net/4ror198u/2

标签： html css hover

【解决方案1】：

你将绿色类与 shell 类错放了，所以我重新排列了它，并在 .green 类中放置了一些属性，以使差异变得明显。蓝色框的作用与你对僵尸的效果完全一样。

<meta charset="UTF-8">
<title>Title</title>

<style>

    * {
        color: yellow;
        margin: 0;
        padding: 0;
    }

    .zombitwo {
        height: 200px;
        width: 200px;
        background: pink;
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        display: none;

    }

    .zombione:hover + .zombitwo {
        display: block;
    }

    .black{
    //border: 5px solid red;
        background-color: black;
        width: 300px;
        height: 300px;

    }

    .blue{
        width: 300px;
        height: 300px;
        background-color: blue;
    //border: 5px solid blue;
    }

    .green{

        height: 300px;
        width: 300px;
        background-color: green;
        color:red;
    //border: 5px solid green;
        display: none;
        text-align:center;

    }

    .blue:hover + .green{
        display: block;
    }

</style>

<div class="zombione">test</div>
<div class="zombitwo">work</div>

<div class="wrapper">
    <div class="shell">
        <div class="black">
            <div class="blue">
                <div class="shell">
                </div>
            </div>
            <div class="green">
                <div class="shell">
                    <div class="sblack"></div>
                    <div class="sred"></div>
                    <div class="sgreen">It works fine!!</div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：