Animate Link点击下划线而不是hover？

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

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

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-ulr { display: inline-block; } .sliding-ulr:after { content: ''; display: block; height: 3px; width: 0; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-ulr:hover:after { width: 100%; background: blue; } 

任何帮助将不胜感激。

Answer 1

由于此方法正在使用CSS事件:hover ，因为没有click CSS的方法，所以不能仅为代码click更改。 你可以有：

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

    .sliding-ulr:hover:after 

   至

    .sliding-ulr.clicked:after 

   然后用Jquery：

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

   检查这个演示小提琴

Answer 2

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

  Test Link 

Answer 3

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

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

 click me and hold!