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

Question

我正在使用这个CSS:

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

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

当我从文本中删除鼠标指针时,动画会缩放到110%,然后闪回100%.

看一下这个小提琴的演示.

如何在指针离开文本之前保持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);
}

小提琴