html - CSS 悬停不适用于多个元素

Question

我想做的是将鼠标悬停在一个元素上并更改 CSS 中另一个元素的显示。我之前问过一个关于如何做到这一点的问题，这很有效，但是，现在我添加了多个元素，但它不起作用。代码在下面，我在这里遗漏了什么吗？

CSS

.main-map {
    width: 700px;
    height: 558px;
    float: left;
    position: relative;
    margin-top: 100px;
    background-image: url(map-london.png);
}

.contact-box {
    width: 250px;
    position: relative;
    float: right;
    height: 300px;
    margin-right: -160px;
    margin-top: -50px;
}



#contact1 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover1 {
    position: absolute;
    float: left;
    margin-top: 40px;
    margin-left: 230px;
    width: 50px;
    height: 50px;
    background: aqua;
}

#hover1:hover + .contact-box > #contact1 {
    display: block;
}



#contact2 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover2 {
    position: absolute;
    float: left;
    margin-top: 130px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: red;
}

#hover2:hover + .contact-box > #contact2 {
    display: block;
}


#contact3 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}

#hover3 {
    position: absolute;
    float: left;
    margin-top: 190px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: blue;
}

#hover3:hover + .contact-box > #contact3 {
    display: block;
}

和 HTML

<div class="main-map">
          <div id="hover1"></div>
          <div id="hover2"></div>
          <div id="hover3"></div>


            <div class="contact-box">
                <div id="contact1">
                    This is a test.
                </div>


                <div id="contact2">
                    This is a test 2
                </div>

                <div id="contact3">
                    This is a test 3
                </div>
            </div>


        </div>

Answer 1

尝试替换 adjacent sibling selector +与 general sibling selector ~ .当您添加多个元素时它不起作用的原因是因为相邻的兄弟选择器将使它仅适用于您的第三个元素，即 hover3 自 .contact-box紧随其后。

即

#hover1:hover ~ .contact-box > #contact1 {
    display: block;
}

Demo

事实上，您还可以概括和组合其中一些规则:

HTML:

<div class="main-map">
    <div id="hover1" class="hover"></div>
    <div id="hover2" class="hover"></div>
    <div id="hover3" class="hover"></div>
    <div class="contact-box">
        <div class="contact">This is a test.</div>
        <div class="contact">This is a test 2</div>
        <div class="contact">This is a test 3</div>
    </div>
</div>

CSS:

.contact-box > .contact {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover1 {
    margin-top: 40px;
    margin-left: 230px;
    background: aqua;
}
#hover3 {
    margin-top: 190px;
    margin-left: 345px;
    background: blue;
}
#hover2 {
    margin-top: 130px;
    margin-left: 345px;
    background: red;
}
.hover {
    position: absolute;
    float: left;
    width: 30px;
    height: 30px;
}
.hover:nth-child(1):hover ~ .contact-box :nth-child(1), 
.hover:nth-child(2):hover ~ .contact-box :nth-child(2), 
.hover:nth-child(3):hover ~ .contact-box :nth-child(3) {
    display: block;
}

Demo