css - 为什么转换:scale not kept on :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

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

.link {
    display: inline-block;
}

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

FIDDLE