4

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.

2 Respostas 2

6

Não é possível fazer por CSS. Os seletores de irmãos + e ~ só permitem selecionar elementos posteriores no DOM. Por exemplo, é possível selecionar a segunda engrenagem no hover da primeira com #start:hover ~ figure, mas o contrário o CSS não deixa. Você precisa usar JavaScript.

1
  • Foi o que imaginei! Muito obrigado pela resposta! Commented 2/06/2014 às 21:58
1

Tente fazer o seguinte código:

figure#start2:hover #start {
  -webkit-transform: rotate(80deg); /* Compatibilidade com o Google Chrome e Safari */
   -khtml-transform: rotate(80deg); /* Compatibilidade com todos os outros navegadores */
     -moz-transform: rotate(80deg); /* Compatibilidade com o Mozilla Firefox */
       -o-transform: rotate(80deg); /* Compatibilidade com o Opera */
          transform: rotate(80deg); /* Declarando a propriedade CSS */
}
1
  • Isso só funcionaria se #start fosse filho da outra figure, não irmão.
    – bfavaretto
    Commented 2/06/2014 às 3:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .