为什么 transform:scale 没有保持在 :hover 上？

Question

我正在使用这个 CSS:

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

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

当我从文本上移开鼠标指针时，动画缩放到 110%，然后瞬间变回 100%。

有关演示，请参阅 this fiddle。

如何让它保持 110% 比例直到指针离开文本？

Answer 1

您需要定义一个link为display: inline-block，并添加前缀。 CSS:

.link {
    display: inline-block;
}

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

Answer 2

你可以使用 Jquery 吗？

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

或者也许

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

Why is transform:scale not kept on :hover?