How to change style of higher brothers?

Navigation
4

I have a parent element (div # workarea) that has four children: figure#start , p#first , figure#start2 and 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>

I would like to have the first child ( figure#start2 ) get a figure#start when hover is on the third child ( transform:rotate(Xdeg) ).

How could this be possible?

I'll apply the style in this example , where figure#start is the first gear and figure#start2 is the second gear. And your sequential siblings ( p#first and p#second ) correspond to bars that get translateX .

    
asked by anonymous 01.06.2014 / 21:25

2 answers

6

Can not be done by CSS. Selectors of siblings + and ~ only allow you to select later elements in the DOM. For example, you can select the second gear in the hover of the first with #start:hover ~ figure , but otherwise the CSS will not let you. You need to use JavaScript.

    
02.06.2014 / 05:58
1

Try to make the following code: 

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 */
}
    
01.06.2014 / 23:27
What happens with class name resolution in php 5.5? Function to return the source code name itself in python