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 javascript

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

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

Answer 2

你可以使用svg。 SEE DEMO

HTML：

<div>
      <svg width="200" height="200">
          <line x1="0" y1="0" x2="600" y2="0" />
      </svg>
 </div>

CSS：

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ddd;
}

svg {
    position: absolute;
    top: 200px;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s;
}

div:hover svg line {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

如何在分区边界上使用css或jquery来悬停动画效果

2 个答案: