[英]Animate Link underline on click as opposed to on hover?
Having trouble getting my head around how I can recreate this effect as an on click as opposed to on hover? 遇到麻烦时,如何才能通过单击而不是悬停来重新创建此效果?
I'm not great with jQuery so having trouble working out how I can trigger this to happen on click. 我对jQuery不太满意,因此无法确定如何触发点击即可发生。 I came across this website to help create the effect I'm going for (Underline Left to Right).
我偶然发现了这个网站,以帮助创建想要的效果(从下到下划线)。 The demo can be seen in the following link...
该演示可以在以下链接中看到...
http://bradsknutson.com/blog/css-sliding-underline/ http://bradsknutson.com/blog/css-sliding-underline/
I'm currently using the following js to fade in a div and I want the line to slide in at them same time. 我目前正在使用以下js淡入div,并且希望该行同时滑入。
New jsfiddle - http://jsfiddle.net/tfgou78c/4/ 新的jsfiddle- http://jsfiddle.net/tfgou78c/4/
JS: JS:
$(function() {
$('.submit_button').click(function() {
var elem = $('.form_wrap');
if (elem.css('display') == 'none') {
elem.fadeIn(1750);
}
else {
elem.fadeOut(1750);
}
});
});
CSS: 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;
}
Any help would be greatly appreciated. 任何帮助将不胜感激。
Since this method are using the CSS event :hover
you can't change that for click
just on the code because there is no method for click
on CSS. 由于此方法使用CSS事件
:hover
您无法仅click
代码就更改它,因为没有click
CSS的方法。 You can have: 你可以有:
You tag this with Jquery so you can change the CSS match to: 您可以使用Jquery对此进行标记,以便将CSS匹配更改为:
.sliding-ulr:hover:after
to 至
.sliding-ulr.clicked:after
And then with Jquery: 然后用jQuery:
$('.sliding-ul-r').on('click',function(){ $(this).toggleClass('clicked'); })
Check this Demo Fiddle 检查这个演示小提琴
Something like http://jsfiddle.net/y4wuurt9/ ? 像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>
On click you wouldn't want it to stay would you? 单击时,您不希望它保留吗?
Here's a pure css version that gets underlined on click: 这是一个纯CSS版本,在点击时会带有下划线:
a:active{ text-decoration:underline; } a{ text-decoration:none; }
<a href="#">click me and hold!</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.