Невозможно получить div, чтобы появляться при зависании над другим div

Question

Приносим извинения за опубликование вопроса, на который должны отвечать другие темы, но после последнего часа пробных решений, уже предоставленных без каких-либо успехов, я должен принять мое кодирование в другое место неверно. Если вы хотите перейти к просмотру проекта, Мне нужна #info_area, чтобы появиться, когда мышь над другими div, например #final_sale. link to project

CSS-код выглядит следующим образом

#final_sale { 
    width: 474px; 
    position: absolute; 
    top: 691px; 
    left: 5px; 
    transition: width 1s, height 1s; 
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; 
} 
#final_sale:hover { 
    width: 575px; 
    position:absolute; 
    top:691px; 
    left:5px;  
} 

Код для все парения дивы выглядит так, они просто другие названия, чем «final_sale». Все эти divs также имеют класс «show_info» (.show_info), который вы можете увидеть в html ниже.

Теперь поднятием других постов ответил я есть информация область, как это:

#info_area { 
    background-color: #666; 
    display: block; 
    opacity:0; 
    height: 175px; 
    width: 325px; 
    position: absolute; 
    top: 365px; 
    left: 397px; 
    border: 1px solid; 
    box-shadow: 1px 3px 12px; 
    transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
} 
.show_info:hover #info_area { 
    background-color: #666; 
    display: block; 
    opacity:0.5; 
    height: 175px; 
    width: 325px; 
    position: absolute; 
    top: 365px; 
    left: 397px; 
    border: 1px solid; 
    box-shadow: 1px 3px 12px; 
} 

Я также попытался «.show_info: парении + #info_area»

Вот HTML, мой лучший возможно, потому, что «info_area» не вложен в один из других div, но я также пробовал это, а также пытался включить основной содержащий div в CSS.

HTML

<div id="funnel_container"> 
    <!---description blocks----> 
     <div id="info_area"> 
      info here 
     </div> 
    <!---description block end---> 

    <!-----main mouse over blocks----> 
    <div id="leads" class="show_info"> 
     <img src="Leads to be qualified(yellow).jpg" alt="leads to be qualified" class="title_block" /> 
    </div> 
    <div id="scoring" class="show_info"> 
     <img src="scoring and cultivation(blue).jpg" alt="scoring and cultivation" class="title_block" /> 
    </div> 
    <div id="sales" class="show_info"> 
     <img src="qualified sales lead(red).jpg" alt="qualified sales leads" class="title_block" /> 
    </div> 
    <div id="final_sale" class="show_info"> 
     <img src="final sale(orange).jpg" alt="Final Sale" class="title_block" /> 
    </div> 
<!---end of main blocks----> 
</div> 

Я загрузил проект HERE , может занять второе, чтобы загрузить, так как я не полностью сделал это веб готовы из-за этого не быть завершен или находится там, где он будет в конечном счете идти.

Благодарим вас заблаговременно всем, кто может помочь, его везут меня сумасшедшим весь вечер, и я надеюсь, что его что-то простое я пропустил.

Answer 1

Если вы можете сделать #info_area последний брат, то вы могли бы добиться этого с general sibling combinator:

.show_info:hover ~ #info_area{ 
    ... 
}