Сделать другое изображение вращением при наведении

Question

Предположим, у меня есть 2 фото. Pic А на передней части ПОС B. Я хочу B, чтобы повернуть, когда я парить A. Вот мой HTML код

<div id="nav"> 
<img class="button" src="images/ornament.png"/> 
<img class="circle" src="images/profile.png"/> 
</div> 

И мой CSS

.circle:hover .button 
{ 
transition: 3s; 
transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate (360deg); 
} 

Пожалуйста, кто-нибудь помочь мне с этим. Большое спасибо!

Answer 1

В настоящее время CSS не может пересекать DOM, поэтому в этом случае это было бы невозможно. Для этого вам понадобится JavaScript.

В чистом CSS вы могли бы, однако, сделать обратное. Изменение порядка разметки:

<img class="circle" src="//.." /> 
<img class="button" src="//.." /> 

EXAMPLE HERE

Либо использовать соседний родственный комбинатор, + или общий родственный комбинатор, ~.

.circle:hover + .button { 
    transition: 3s; 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate (360deg); 
} 

Используя тот же HTML, вы также можете изменить визуальный порядок, плавая элемент (ы) в противоположном направлении. (example)

Кроме того, стоит отметить, что вы использовали .circle:hover .button; который выберет элемент с классом button, который является потомком элемента с классом .circle, который находится в состоянии :hover.