Предположим есть 4 блока div с разной высотой, и при наведение нужно что бы все блоки стали одной высоты. Или предположим что у них разная позиция в пространстве и при наведение они вставали в ряд.. Вообщем навел курсор на один блок и остальные тоже выполняют действие, на второй блок другие действие.
1 ответ
.wrapper {
display: flex;
justify-content: space-between;
}
.item {
display: inline-block;
min-width: 23.5%;
height: 200px;
background-color: blue;
transition: .2s;
}
.item:nth-child(1) {
margin-top: 50px;
height: 140px;
}
.item:nth-child(2) {
margin-top: 0px;
height: 150px;
}
.item:nth-child(3) {
margin-top: 0px;
height: 50px;
}
.item:nth-child(4) {
margin-top: 100px;
height: 100px;
}
.wrapper:hover .item {
margin-top: 0;
height: 150px;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
-
-
1
-
-
@VadimOvchinnikov за спасибо? ладно, я сегодня добрый. поправил. 13 янв 2017 в 22:33
-
@AndreyFedorov Кстати вместо
.item:not(:last-child) { margin-right: 2%; }
лучше.wrapper { justify-content: space-between; }
. 13 янв 2017 в 22:33