CSS Onmouseover drehen Kind Element

Question

Ich habe im folgenden Code, dass, wenn Sie die Maus über das Clid-Element, es dreht. Ich möchte die Eltern und das Kind die Drehung beim Schweben auslösen.

https://jsfiddle.net/d4sbvmb0/

.parent { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: silver; 
 
    padding: 25px; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border-radius: 2% 50%; 
 
    height: 100px; 
 
    margin: 100px; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease-in-out; 
 
    width: 100px; 
 
} 
 

 
.child:hover { 
 
    transform: rotate(20deg); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 1

Wenn Sie das übergeordnete Element brauchen nur die Drehung des Kindes einfach modifizieren, um die Wähler enthält die Transformation .child:hover-.parent:hover .child auszulösen. Mit letzterem sagen wir, wenn die .parent schwebt, wählen Sie die .child und drehen Sie sie.

.parent { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: silver; 
 
    padding: 25px; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border-radius: 2% 50%; 
 
    height: 100px; 
 
    margin: 100px; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease-in-out; 
 
    width: 100px; 
 
} 
 

 
.parent:hover .child { 
 
    transform: rotate(20deg); 
 
} 
 

 
/* Add me if you want additional rotation when both are hovered. */ 
 
/* 
 
.parent:hover .child:hover { 
 
    transform: rotate(40deg); 
 
} 
 
*/

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Hinweis:transition-timingtransition-timing-function sein sollte.

Answer 2

versuchen diese

.parent:hover .child { 
    transform: rotate(20deg); 
}