.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
请尽快给出答案,或者如果有任何其他替代方式也请通知我
最佳答案
你不能像那样真正为伪元素设置动画,但你可以添加另一个元素
<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);
});
关于javascript - 如何在分区边界上使用 css 或 jquery 在悬停时赋予动画效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22089049/