CSS hover не работает с несколькими элементами

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 ~. Причина, почему это не работает, когда вы добавили несколько элементов, состояло в том, что из-за смежного селектора, который заставит его работать только для вашего третьего элемента i.e 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

Answer 2

"+" является "Смежный" Sibling селектора. Смежные средства прямо смежны.

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>