Make the other image rotate when hover - html

Question

Let's say I have 2 pics. Pic A in front of pic B. I want B to rotate when I hover A. Here's my HTML code
<div id="nav">
<img class="button" src="images/ornament.png"/>
<img class="circle" src="images/profile.png"/>
</div>
And my CSS
.circle:hover .button
{
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Please someone help me with this. Thanks a lot!

Answer 1

CSS currently can't transverse the DOM, therefore it wouldn't be possible in this case. You would need JavaScript in order to do that.
In pure CSS, you could, however, do the opposite. Changing the order of the markup:
<img class="circle" src="//.." />
<img class="button" src="//.." />
EXAMPLE HERE
Either use the adjacent sibling combinator, +, or the general sibling combinator, ~.
.circle:hover + .button {
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Using the same HTML, you could also change the visual order by floating the element(s) in the opposite direction. (example)
Aside from this, it's worth noting that you were using .circle:hover .button; which will select an element with class button that is a descendant of a element with class .circle this is in the :hover state.