Question

有人可以通过我的列表转换帮助我解决问题。当您将鼠标悬停在文本上时，字体会在悬停的峰值处跳过？为什么会这样，如何在整个过渡过程中使其顺利进行。

HTML

<ul class="long-lists">
<li><a href="target=&amp;pid=468&amp;did=0&amp;tab=0">Arts and Humanities</a></li>
<li><a href="http://www.ymcabwv.org/childcare">Childcare and Early Childhood Education</a></li>
<li><a href="target=&amp;pid=374&amp;did=0&amp;tab=0">Free 7<sup>th</sup> Grade Memberships</a></li>
<li><a href="http://www.ymcabwv.org/program-pages/ymca-kindergarten-academy">Full Day Kindergarten in West Chester</a></li>
<li><a href="target=&amp;pid=867&amp;did=0&amp;tab=0">Jennersville Theatre Programs</a></li>
<li><a href="target=&amp;pid=373&amp;did=0&amp;tab=0">Believe and Achieve</a></li>
<li><a href="target=&amp;pid=675&amp;did=0&amp;tab=0">Youth Council</a></li>
</ul>

CSS

.long-lists li a{
    font-size: 1.15em;
    text-decoration: none;
    color: #0060af;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 190%;
    overflow: hidden;
    display: block;
    transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
}

.long-lists li a:hover{
    transform: scale(1.01);
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -ms-transform: scale(1.01);
    overflow: hidden;
    text-decoration: none;
    color: #0089d0;
    line-height: 190%;
}

包括Codepen，http://codepen.io/anon/pen/oFHGb 感谢

简单的CSS转换使字体跳过缩放峰值

0 个答案: