Показать DIV при наведении на другое DIV

Question

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

В принципе, я хочу показать скрытый div, пока я навешиваю отдельный div. При наведении курсора на отдельный div он изменит цвет bg.

Спасибо за помощь.

Вот CodePen того, что у меня есть.

HTML

<div class="container-fluid"> 
    <div class="image"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
    <div class="five"></div> 
    </div> 
    <div class="one-text"> 
    <p>Here is some text</p> 
    </div> 
    <div class="two-text"> 
    <p>Here is some text</p> 
    </div> 
    <div class="three-text"> 
    <p>Here is some text</p> 
    </div> 
    <div class="four-text"> 
    <p>Here is some text</p> 
    </div> 
    <div class="five-text"> 
    <p>Here is some text</p> 
    </div> 
</div> 

CSS

body { 
    background-color: #c5d5cb; 
    color: #fff; 
    font-family: Open Sans; 
    font-weight: 300; 
    margin: 0 auto; 
} 

.container-fluid { 
    background-color: #9fa8a3; 
    height: 600px; 
    padding: 30px; 
} 
.container-fluid .image { 
    background-color: #e3e0cf; 
    height: 100%; 
    width: 50%; 
    float: right; 
    padding: 30px; 
    display: flex; 
    justify-content: space-between; 
} 
.container-fluid .image .one { 
    background-color: #c5d5cb; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
} 
.container-fluid .image .one:hover { 
    background-color: #3b3a36; 
} 
.container-fluid .image .two { 
    background-color: #c5d5cb; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
} 
.container-fluid .image .two:hover { 
    background-color: #3b3a36; 
} 
.container-fluid .image .three { 
    background-color: #c5d5cb; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
} 
.container-fluid .image .three:hover { 
    background-color: #3b3a36; 
} 
.container-fluid .image .four { 
    background-color: #c5d5cb; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
} 
.container-fluid .image .four:hover { 
    background-color: #3b3a36; 
} 
.container-fluid .image .five { 
    background-color: #c5d5cb; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
} 
.container-fluid .image .five:hover { 
    background-color: #3b3a36; 
} 
.container-fluid .one-text { 
    width: 300px; 
    display: block; 
    float: right; 
    display: none; 
} 
.container-fluid .two-text { 
    width: 300px; 
    display: block; 
    float: right; 
    display: none; 
} 
.container-fluid .three-text { 
    width: 300px; 
    display: block; 
    float: right; 
    display: none; 
} 
.container-fluid .four-text { 
    width: 300px; 
    display: block; 
    float: right; 
    display: none; 
} 
.container-fluid .five-text { 
    width: 300px; 
    display: block; 
    float: right; 
    display: none; 
} 
.container-fluid .one:hover + .one-text { 
    display: block; 
} 
.container-fluid .two:hover + .two-text { 
    display: block; 
} 
.container-fluid .three:hover + .three-text { 
    display: block; 
} 
.container-fluid .four:hover + .four-text { 
    display: block; 
} 
.container-fluid .five:hover + .five-text { 
    display: block; 
} 

Answer 1

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

Я сделал это в простой ванильной JS, он будет работать во всех современных браузерах.

Сначала я добавил небольшой переход ко всему, вместо отображения ни на пунктах я сотворил:

webkit-transition:.4s; 
transition:.4s; 
opacity:0; 

Затем я создал mouseIn и мыши Out функции, с 3-мя параметры.

function onEntry(whichDiv,whichText, color) { 
whichDiv.style.background = color; 
whichText.style.opacity = '1'; 
} 

Тогда мне пришлось добавить EventListener всем дивы:

one.addEventListener('mouseover', function(){ 
onEntry(one, txtOne, "#3b3a36"); 
} 

См, что третий параметр, вы можете изменить ваши желаемые цвета.

Вот ссылка на перо:

http://codepen.io/damianocel/pen/vXQqJE

А по правилам CSS, чтобы воздействовать на другие элементы на парении, он идет как:

• непосредственно внутри контейнера:

container: hover> #element

• Если куб находится рядом (после того, как контейнеры закрывающий тег) контейнер:

контейнер: парить + #element

• Если куб находится где-то внутри контейнера:

container: hover #cube

Cheers

Answer 2

Попробуйте

#content:hover #hoverbar{ 
    visibility:visible; 
}