CSS Onmouseoverは子要素を回転します

Question

私は次のコードで、clid要素の上にマウスを置くと回転しています。 ホバリング時に親と子が回転をトリガーするようにします。

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

あなただけの単純.parent:hover .childに.child:hoverから変換を含むセレクタを変更する子の回転をトリガーする親要素が必要な場合。後者の場合、.parentをホバリングしたときに.childを選択して回転させます。

.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>

注：transition-timingはtransition-timing-functionでなければなりません。

Answer 2

あなたは親が推移したとき、子を回転させるように求めている。この

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