为什么:hover时transform:scale不保留？

Question

我正在使用这个CSS：

.link {
    transition: all .2s ease-in-out;
}
.link:hover {
    transform: scale(1.1);
}

当我将鼠标悬停在文本上时，它按预期缩放到110％，但是一旦过渡完成，即使鼠标指针仍在文本上，它也会缩回到100％。

当我从文本中移除鼠标指针时，动画会闪烁地缩放到110％，然后回到100％。

请参见此演示的链接。

如何使其保持110％的比例，直到指针离开文本？

- BenMorel

---

注意：这是在Chrome上的行为。我刚在IE11上进行了测试，看起来运行良好。 - BenMorel

Answer 1

您需要将链接定义为display: inline-block，并添加前缀。

CSS：

.link {
    display: inline-block;
}

.link:hover {
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);
}

FIDDLE

- lmgonzalves

---

“display: inline-block” 的确是解决方案。谢谢！ - BenMorel

Answer 2

你会使用Jquery吗？

$(".link").hover(function(){ ... }); 

或者也许

$(".link").mouseover(function(){ ... });

- ninie1616

---

使用jQuery来解决这样一个简单的问题是杀鸡焉用牛刀。 - Cthulhu