Question

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

那个zombi课程还可以，当我的鼠标移过它时，它会向我显示那个粉红色的盒子，但是为什么当我的鼠标是蓝色的时候我看不到绿色的课程？你可以帮我解决我的错误以及我需要做些什么来解决这个问题，也可以提出一些例子，说明为什么这个东西会破坏以及如何在功能上阻止它。 Thanx提前！：）

Answer 1

你用类shell错误地放置了类green，所以我重新安排了它，然后我将一些属性放到了.green类中，以便区别显而易见。蓝盒的效果与你对zombieone的效果完全相同。 / p>

<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>

悬停：显示不显示div

1 个答案: