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

如果你只需要父元素觸發孩子的旋轉只需修改包含變換從.child:hover到.parent:hover .child選擇。對於後者，我們說，當.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); 
}