Як змінити один блок при наведенні на інший

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{11-06-2016, 18:00 1 346 0}

Іноді потрібно змінити один блок коли наводиться курсор на іншу силку чи блок.

У css можна міняти - наступний в тому-ж рівні вкладеності (+) один із таких в тому-ж рівні вкладеності (~) безпосереднього нащадка ">" і будь-якого нащадка "".

Увага! батьків і попередні елементи міняти не можна.

<div class="hoverme">Наведи на меня
<div class="test"></div>
<div><div class="test"></div> </div>
</div>
<div class="test"></div>
<hr/>
<div class="test"></div>

div {
margin-left: 10px;
}
.test:before {
content: "не навів";
}
.hoverme:hover .test:before {
content: " я внук";
}
.hoverme:hover > .test:before {
content: "> я дитина";
}
.hoverme:hover ~ .test:before {
content: "~ я сусід";
}
.hoverme:hover + .test:before {
content: "+ я наступний";
}

Коментарі