在悬停的链接下创建下划线
问题描述:
我正在寻找一种方法,让一个链接下方的下划线在悬停时进行拍摄,并在鼠标悬停时再次离开。我不确定我是否做得很好解释,所以如果你不明白,请告诉我。我很确定这不能用一个实际的下划线来完成,可能是使用<hr>
标签?任何帮助表示赞赏!在悬停的链接下创建下划线
答
a {
text-decoration: none;
display: inline-block;
border-bottom: 1px solid blue;
margin-right: 39px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
border-bottom: 1px solid blue;
width: 30px;
margin-right: 9px;
}
+0
谢谢伊恩!我想我应该考虑使用边界...感谢您的帮助! – 812402 2013-04-22 21:15:32
答
这是非常简单的CSS:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
但是,这仅仅是一个悬停效果,如果你想有一个过渡,然后上面的回答应该工作。
http://www.net-kit.com/10-ways-to-animate-your-links/ – 2013-04-22 21:11:47