Eu tenho um elemento pai (div#workarea) que possui quatro filhos: figure#start
, p#first
, figure#start2
e p#second
:
<div id="workarea">
<h1 id="title">Área de Testes</h1>
<figure id="start">
<img id="gear2" src="img/gear.png">
</figure>
<p id="first"></p>
<figure id="start2">
<img id="gear3" src="img/gear.png">
</figure>
<p id="second"></p>
</div>
Gostaria de fazer com que ao setar hover no terceiro filho (figure#start2
), o primeiro filho (figure#start
) adquirisse um transform:rotate(Xdeg)
.
Como isso seria possível?
Vou aplicar o estilo neste exemplo, onde o figure#start
é a primeira engrenagem e o figure#start2
é a segunda engrenagem. E seus irmãos sequenciais (p#first
e p#second
) correspondem às barrinhas que adquirem um translateX
.