当鼠标输入li中的一个时关于投资组合联系方式如何使文本修饰下划线。另外如何控制下划线的速度,如果我只想用下划线装饰1/3的单词呢?我在想吗?请帮忙!
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnabout"><a href="#parallax"><strong>About</strong></a></li>
<li id="btnportfolio"><a href="#portfolio"><strong>Portfolio</strong></a></li>
<li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li>
</ul>
</div>
$(document).ready(function(){
$('navbar-collspse').mouseenter(function(){
$(#btnabout).css("text-decoration", underline");
});
});
答案 0 :(得分:3)
使用CSS:
.nav li a:hover{
text-decoration: underline;
}
如果该行只应跨越1/3
宽度,而不是使用a:after
伪来创建您的行
.nav li{
display:inline-block;
}
.nav li a{
position:relative;
display:block;
padding: 8px 16px;
text-decoration: none;
}
.nav li a:after{
content: "";
position:absolute;
bottom: 0;
left:16px; /* = padding size */
height: 1px;
width:0;
transition: 0.3s;
background: blue;
}
.nav li a:hover:after{
width: 33.333%;
}
&#13;
<ul class="nav navbar-nav navbar-right">
<li id="btnabout"><a href="#parallax"><b>About</b></a></li>
<li id="btnportfolio"><a href="#portfolio"><b>Portfolio</b></a></li>
<li id="btncontact"><a href="#contact"><b>Contact</b></a></li>
</ul>
&#13;
答案 1 :(得分:0)
您可以使用简单的CSS :hover
为文字添加下划线:
.nav li a:hover{
text-decoration: underline;
}
为了控制样式更改速度,您可以使用CSS transition。 尽管如此,请务必检查它是否适用于您想要更改的属性。 如果你只想为文本的一部分加下划线,你可以在其中创建另一个元素,添加一些样式,使它看起来像下划线并给它适当的宽度,并在悬停时改变它的不透明度。
<强> HTML 强>
<li id="btnabout">
<a href="#parallax">
<strong>About<span class="underline"></span></strong>
</a>
</li>
<强> CSS 强>
li a strong { position: relative; }
.underline {
opacity: 0;
display: block;
position: absolute;
bottom: 0;
right: 0; /* you can move it to the left/right here as you wish */
height: 1px;
width: 33%; /* for 1/3 width */
background-color: /* Your font color here */;
transition: opacity .3s linear; /* remember to use webkits */
}
li a:hover .underline {
opacity: 1;
}
答案 2 :(得分:-1)
.navbar-collapse ul li a:hover{
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnabout"><a href="#parallax"><strong>About</strong></a></li>
<li id="btnportfolio"><a href="#portfolio"><strong>Portfolio</strong></a></li>
<li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li>
</ul>
</div>