javascript - 如何在分区边界上使用 css 或 jquery 在悬停时赋予动画效果

Question

.heading-text{
    font-family: verdana;
    font-size:12px;
    color:#124253;
    min-width:50px;
    height:32px;
    margin-top:8px;
    text-align: center;
    cursor: pointer;
}
.heading-text:hover{
    border-bottom-style:solid;
    border-bottom-color:#012b61;
    border-bottom-width:3px;
}

在上面的分区中，我想给出分区的底部边框从左开始并在悬停时向右移动的效果，是否可以通过 CSS 或 javascript 的 JQUERY

请尽快给出答案，或者如果有任何其他替代方式也请通知我

Answer 1

你不能像那样真正为伪元素设置动画，但你可以添加另一个元素

<p class="heading-text">This is a heading</p>
<div class="line"></div>

然后做

$('.heading-text').on('mouseenter mouseleave', function(e) {
    $('.line').stop(true)
              .animate({width: e.type=='mouseenter' ? '100%' : '0'}, 1000);
});

FIDDLE