Html 由不同父元素触发的同一元素上的转换和变换

我有一个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版本，请访问以下JSFIDLE：

谁能告诉我，当第一次移动到LI上时，旋转是什么时候没有触发的？我不太喜欢CSS3动画，甚至不知道该搜索什么

---

谢谢

第二个变换规则将覆盖第一个变换规则，您应该将缩放规则与旋转规则一起定义

/* 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);
}

演示：

或者，正如@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);
}

---

演示：

哦，我第一次就试过了。但当它从灰色变为黄色时，它所做的一切就是箭头变得模糊而不移动。这可能是chrome的问题吗？将尝试其他浏览器。它在我的FF中也不起作用。。。当把鼠标放在灰色区域的顶部时，它会变大吗？然后转到黄色的圆圈。。。它旋转吗？@abidibo:我明白Boris的意思。尝试先将

li

悬停，然后直接从

li

内移动到

。箭头环绕

。我在Chrome和FF上都看到了。你！我喜欢你！谢谢，这正是我想要的：）@Boris:如果出于任何原因，您不想将

比例（1.5）

添加到另一个

变换

设置中，那么您也可以执行类似操作（旋转包装器）。阿比迪博，如果你愿意的话，可以在你的答案中加上这个。