я новичок в веб разработке, и недавно при верстки сайта у меня появился вопрос об изменении соседних элементов при наведении на соседний (блок, элемент и т.п.). вот моя проблема, есть три блока, которые расположены горизонтально:
<section class="test">
<div class="boxes">
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
</div>
</section>
Стили такие:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ccc;
}
::-webkit-scrollbar {
display: none;
}
.test {
display: block;
margin-top: 10px;
vertical-align: middle;
background: #ccc;
height: 250px;
}
.box {
display: inline-block;
width: 250px;
height: 250px;
background: red;
}
.boxes {
text-align: center;
}
.first, .second, .third {
transition: all 0.5s;
}
.first {
background: #CEFF91;
}
.second {
background: #3AE2CE;
}
.third {
background: #B34EE9;
}
.first:hover {
transform-origin: right top;
transform: scaleX(2);
transition: all .5s;
}
.first:hover ~ .second {
transition: all 0.5s;
}
.second:hover {
transform-origin: center center;
transform: scaleX(2);
transition: all .5s;
}
.second:hover ~ .third {
background: red;
transform-origin: left center;
transform: translate(125px);
transition: all .5s;
}
Надо делать так, чтоб при наведении на second и third изменились соответственно first и second, т.е. чтоб работали эти строки:
.second:hover ~ .first {
background: red;
/*др стили*/
}
.third:hover ~ .second {
background: red;
/*др стили*/
}
Заранее спасибо