jQuery技术:Animate Link点击下划线而不是hover?

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

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

我目前正在使用以下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; } 

任何帮助将不胜感激。

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

    像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 

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

     a:active{ text-decoration:underline; } a{ text-decoration:none; } 
     click me and hold! 

      以上就是jQuery教程分享Animate Link点击下划线而不是hover?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(计算机技术网)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ctvol.com/jquerytutorial/561497.html

      (0)
      上一篇 2021年2月4日
      下一篇 2021年2月4日

      精彩推荐