为什么变换：规模不保持：悬停？

Question

我正在使用这个CSS：

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

当我将文本悬停时，它按预期缩放到110％，但转换完成后，即使鼠标指针仍在文本上，它也会缩小到100％。

当我从文本中删除鼠标指针时，动画会缩放到110％，然后快速恢复到100％。

请参阅this fiddle了解演示。

如何在指针离开文本之前保持110％的比例？

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

Answer 2

你能使用Jquery吗？

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

或者

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