点击动画链接下划线而不是悬停？答案

【问题标题】：Animate Link underline on click as opposed to on hover?点击动画链接下划线而不是悬停？
【发布时间】：2014-12-15 12:17:28
【问题描述】：

想知道如何将这种效果重新创建为点击而不是悬停？

我对 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;
}

任何帮助将不胜感激。

【问题讨论】：

你试过把:hover改成:active吗？
我刚刚编辑了我的问题，对于 js 是否仍然适用？我还没试过。
喜欢jsfiddle.net/arunpjohny/tfgou78c/2 ?
感谢演示，这就是我想要的，除了如何将它与我当前的 js 集成？
已经给出的两个答案都是使用JavaScript来切换类。正如我在第一条评论中推荐的那样，我会用 CSS 来做。

标签： jquery html css animation underline

【解决方案1】：

类似http://jsfiddle.net/y4wuurt9/ 的东西？

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

.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%;   
}

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

【讨论】：

【解决方案2】：

由于此方法使用 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

【讨论】：

你做了我想做的事，但做不到。我尝试使用 addClass 但更新 DOM 太快了。忘记了toggleClass。 +1
感谢您的回复，这是我想要实现的，但是以某种方式将它与我现有的 js 集成？
@user2498890 您不能只将 toggleClass 函数添加到当前的点击处理程序中吗？
@user2498890 as @CalvinScherle 建议将行 $(this)... 添加到您的实际处理程序中
所以我可以将该行添加到我当前的 js 中吗？真的很抱歉这不是很好。

【解决方案3】：

点击时您不希望它停留，对吗？
这是一个纯 CSS 版本，点击时会加下划线：

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

&lt;a href="#"&gt;click me and hold!&lt;/a&gt;

【讨论】：