CSS наведите один div-эффект, который div плюс еще

Question

Я прочитал почти 15 вопросов в связи с этой проблемой, но не нахожу того, что помогает с тем, что я хочу.

Предположим, у меня есть 5 div, уложенных в стиле пирамиды, с одним в середине сверху, а два на стороне внизу.

Что я хочу, если вы наведите курсор на div1 или div5, то оба они выйдут на передний план. И тогда также, если вы наведите указатель мыши на div2 ИЛИ div4, что они оба выйдут на передний план. Я пробовал много вещей, но обычно, если вы наведите курсор на один, другой идет вперед, но не оба. Или то, что у меня сейчас есть, где я нахожусь над родительским div, оба выходят вперед, но когда я на самом деле нависаю над одним из div, ничего не происходит.

Вот код, который у меня есть сейчас.

#stack1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 
#boks3, 
 
#boks1, 
 
#boks2, 
 
#boks4, 
 
#boks5 { 
 
    background-color: #ff3333; 
 
    width: 32%; 
 
    position: absolute; 
 
    margin-left: 33.5%; 
 
    z-index: 3; 
 
    height: 300px; 
 
    text-align: left; 
 
    overflow: hidden; 
 
} 
 
#boks1 { 
 
    background-color: #ff6666; 
 
    margin-left: 2%; 
 
    z-index: 1; 
 
    height: 300px; 
 
} 
 
#boks2 { 
 
    background-color: #ff4d4d; 
 
    margin-left: 17%; 
 
    z-index: 2; 
 
    height: 300px; 
 
} 
 
#boks5 { 
 
    background-color: #ff0000; 
 
    margin-left: 65%; 
 
    z-index: 1; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#boks4 { 
 
    background-color: #ff1a1a; 
 
    margin-left: 50%; 
 
    z-index: 2; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#stack1:hover + #boks1, 
 
#stack1:hover ~ #boks5 { 
 
    background-color: yellow; 
 
    z-index: 4; 
 
}

<div id="boks3"> 
 

 
</div> 
 

 
<div id="stack1"></div> 
 
<div id="boks1"> 
 

 
</div> 
 
<div id="boks5"> 
 

 
</div> 
 

 

 
<div id="stack2"> 
 
    <div id="boks2"> 
 

 
    </div> 
 
    <div id="boks4"> 
 

 
    </div> 
 
</div>

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

Сердечные приветы

Answer 1

Я думаю, что вам нужно обернуть boks1 и boks5 в stack1, а также boks2 и boks4 в stack2. Когда вы наводите курсор на любой из boks es stack: событие hover запустится.

#stack1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 
#boks3, 
 
#boks1, 
 
#boks2, 
 
#boks4, 
 
#boks5 { 
 
    background-color: #ff3333; 
 
    width: 32%; 
 
    position: absolute; 
 
    margin-left: 33.5%; 
 
    z-index: 3; 
 
    height: 300px; 
 
    text-align: left; 
 
    overflow: hidden; 
 
} 
 
#boks1 { 
 
    background-color: #ff6666; 
 
    margin-left: 2%; 
 
    z-index: 1; 
 
    height: 300px; 
 
} 
 
#boks2 { 
 
    background-color: #ff4d4d; 
 
    margin-left: 17%; 
 
    z-index: 2; 
 
    height: 300px; 
 
} 
 
#boks5 { 
 
    background-color: #ff0000; 
 
    margin-left: 65%; 
 
    z-index: 1; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#boks4 { 
 
    background-color: #ff1a1a; 
 
    margin-left: 50%; 
 
    z-index: 2; 
 
    text-align: right; 
 
    height: 300px; 
 
} 
 
#stack1:hover #boks1, 
 
#stack1:hover #boks5 { 
 
    background-color: yellow; 
 
    z-index: 4; 
 
} 
 
#stack2:hover #boks2, 
 
#stack2:hover #boks4 { 
 
    background-color: green; 
 
    z-index: 4; 
 
}

<div id="boks3"> 
 
</div> 
 

 
<div id="stack1"> 
 
<div id="boks1"> 
 
</div> 
 
<div id="boks5"> 
 
</div> 
 
</div> 
 

 
<div id="stack2"> 
 
    <div id="boks2"> 
 
    </div> 
 
    <div id="boks4"> 
 
    </div> 
 
</div>