Question

我无法理解如何在点击时重新创建此效果，而不是悬停？

我对jQuery不是很好，因此无法弄清楚如何在点击时触发这种情况。我遇到了这个网站，以帮助创建我想要的效果（从左到右下划线）。该演示可以在以下链接中看到......

http://bradsknutson.com/blog/css-sliding-underline/

我目前正在使用以下js淡入div，我希望该行同时滑入。

新jsfiddle - http://jsfiddle.net/tfgou78c/4/

JS：

$(function() {
    $('.submit_button').click(function() {
        var elem = $('.form_wrap');
        if (elem.css('display') == 'none') {
            elem.fadeIn(1750);
        }
        else {
            elem.fadeOut(1750);
        }
    });
});

CSS：

.form_wrap {
 display: none;
 }

/* sliding underline LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}

.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}

非常感谢任何帮助。

Answer 1

由于此方法正在使用CSS事件:hover，因此您无法在代码上更改click，因为CSS上没有click方法。你可以：

您可以使用Jquery对此进行标记，以便将CSS匹配更改为：

.sliding-u-l-r:hover:after

到

.sliding-u-l-r.clicked:after

然后用Jquery：

$('.sliding-u-l-r').on('click',function(){
   $(this).toggleClass('clicked');
})

选中Demo Fiddle

Answer 2

类似于http://jsfiddle.net/y4wuurt9/？

＆＃13;

$('.underline-thing').on('click', function(e) {
    e.preventDefault();
    $(this).addClass('lined');
});

＆＃13;

.underline-thing {
    position: relative;
    text-decoration: none;
}

.underline-thing:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: blue;
    -webkit-transition: width 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out;
    transition: width 250ms ease-in-out;
}

.underline-thing.lined:after {
    width: 100%;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="underline-thing" href="#">Test Link</a>

＆＃13;

Answer 3

点击后你就不希望它留下来了吗？这是一个纯css版本，在点击时加下划线：

a:active{
  text-decoration:underline;
}
a{
  text-decoration:none;
}

<a href="#">click me and hold!</a>

Animate Link点击下划线而不是悬停？

3 个答案: