html - 同一元素上的转换和变换，由不同的父元素触发

Question

我有一个带有链接的 UL、LI。

LI 右侧还有一个箭头圆圈。稍后将是一个子导航。

---

我希望箭头在悬停 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/

谁能告诉我，当第一次移动到 LI 时，旋转不会被触发？我不太喜欢整个 CSS3 动画，我什至不知道要搜索什么。

谢谢!

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/