为什么变换：比例不保持在：悬停？答案

【问题标题】：Why is transform:scale not kept on :hover?为什么变换：比例不保持在：悬停？
【发布时间】：2015-05-27 13:22:44
【问题描述】：

我正在使用这个 CSS：

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

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

当我将鼠标指针从文本中移开时，动画会立即缩放到 110%，然后又回到 100%。

请参阅this fiddle 以获取演示。

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

【问题讨论】：

【解决方案1】：

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

.link {
    display: inline-block;
}

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

【讨论】：

【解决方案2】：

你会用 Jquery 吗？

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

或许

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

【讨论】：