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

要查看mockup-html版本，请访问此jsFiddle： https://jsfiddle.net/csf3wwjn/1/

任何人都可以告诉，当第一次移动LI时，是否触发了旋转？我并不是整个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/

由不同的父母

1 个答案: