同一元素上的轉換和變換，由不同的父母觸發

Question

我有一個UL鏈接，裏面有鏈接。

LI的右側還有一個箭頭圈。稍後它將成爲一個子導航。

---

我想的箭頭徘徊在箭本身時長（工作），徘徊在李和旋轉（工作只有一點點）時。

不幸的是，只有當鼠標懸停在LI上並移動到箭頭時纔會觸發增長。直接懸停箭頭時，會觸發旋轉。所以我確定CSS屬性是正確的，但組合不知何故。

這是相關代碼：

li:hover .arrow { 
    transition : 0.3s linear; 
    transform : scale(1.5); 
} 
.arrow-wrap:hover .arrow { 
    transition : 0.6s linear; 
    transform : rotate(360deg); 
} 

要看到樣機，HTML版本，請訪問此的jsfiddle： https://jsfiddle.net/csf3wwjn/1/

誰能告訴，磨片的旋轉不會被觸發時，首先移動了李？我對整個CSS3動畫並不是很滿意，我甚至都不知道要搜索什麼。

THX！

Answer 1

第二個轉換規則重寫首先，你應該用一個旋轉

/* interesting css */ 
li:hover .arrow { 
    transition : 0.3s linear; 
    transform: scale(1.5) rotate(0deg); 
} 
.arrow-wrap:hover .arrow { 
    transition : 0.6s linear; 
    transform: scale(1.5) rotate(360deg); 
} 

演示一起定義縮放規則：https://jsfiddle.net/csf3wwjn/5/

或者，如@Harry指出的那樣，你可以旋轉.arrow-wrap元件

/* interesting css */ 
li:hover .arrow { 
    transition : 0.3s linear; 
    transform: scale(1.5); 
} 
.arrow-wrap:hover { 
    transition : 0.6s linear; 
    transform: rotate(360deg); 
} 

演示：https://jsfiddle.net/csf3wwjn/6/