jQuery文本装饰下划线在导航栏

jQuery text decoration underline in navbar

本文关键字：导航 下划线 文本 jQuery      更新时间：2023-09-26

当鼠标进入其中一个关于作品集联系如何使文本装饰下划线。另外，如何控制下划线的速度，如果我只想用下划线装饰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");
    });
});

使用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%;
}
<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>

你可以使用简单的CSS :hover给你的文本下划线:

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

为了控制样式变化的速度，你可以使用CSS过渡。不过一定要检查它是否适用于您想要更改的属性。如果你只想给部分文本加下划线，你可以在里面创建另一个元素，添加一些样式，让它看起来像下划线，给它适当的宽度，并改变它的不透明度。

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


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

相关文章：