有麻烦我的头围绕如何我可以重新这种效果作为上点击,而不是悬停?
我不是伟大的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;
}
任何帮助将不胜感激。
由于这种方法是使用CSS事件:hover
你不能改变,对于click
,因为对于没有方法只是对代码click
的CSS。 你可以有:
您使用jQuery标签这个,所以你可以改变CSS比赛:
.sliding-ulr:hover:after
至
.sliding-ulr.clicked:after
然后使用jQuery:
$('.sliding-ul-r').on('click',function(){ $(this).toggleClass('clicked'); })
勾选此演示小提琴
喜欢的东西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>
在点击你不希望它留你会吗?
下面是大干快上点击强调了纯CSS版本:
a:active{ text-decoration:underline; } a{ text-decoration:none; }
<a href="#">click me and hold!</a>