Question

当鼠标输入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");
    });
});

Answer 1

使用CSS：

.nav li a:hover{
   text-decoration: underline;
}

如果该行只应跨越1/3宽度，而不是使用a:after伪来创建您的行

＆＃13;

.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;

Answer 2

您可以使用简单的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;
}

Answer 3

.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>

导航栏中的jQuery文本装饰下划线

3 个答案: