CSS hover doesn't work with multiple elements

Question

What I am trying to do is hover over one element and change the display of another element within CSS. I asked a question on how to do this earlier and this worked, however, now I am adding multiple elements and it will not work. The code is below, am I missing something here?

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

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

Take a look at **[this answer of mine..](http://stackoverflow.com/questions/19885585/when-hover-a-image-the-rest-of-images-changes-the-filter/19885603#19885603)** this is possible without jQuery/JS so long as the elements are siblings, or at least descendants of the same parent. — Josh Crozier, Nov 13 '13 at 19:44

PSL · Accepted Answer · 2013-11-13T20:05:26.050

Try replace adjacent sibling selector + with general sibling selector ~. Reason why it doesn't work when you added multiple elements was that because of adjascent sibling selector which will make it work only for your third item i.e hover3 since .contact-box is immediately after that.

i.e

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

Demo

Also you can in fact generalize and combine some of those rules to:

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

7 years later, you have saved me :) Was confused for a while as to why it won't work, and I used wrong selector. Thanks — Mariusz, Apr 28 '20 at 15:20

score 0 · Answer 2 · answered Nov 13 '13 at 19:52

0

"+" is an "Adjacent" Sibling Selector. Adjacent means directly adjacent.

http://reference.sitepoint.com/css/adjacentsiblingselector

<h2>Heading</h2>
<p>The selector for this sibling is h2+p</p>
<p>The selector for this sibling is h2+p+p</p>

answered Nov 13 '13 at 19:52

Wayne

4,760
1
24
24

CSS hover doesn't work with multiple elements

2 Answers2