navbarのjQueryテキストの装飾の下線

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> 
      </div> 
     </nav> 



$(document).ready(function(){ 
    $('navbar-collspse').mouseenter(function(){ 
    $(#btnabout).css("text-decoration", underline"); 
    }); 
}); 

Answer 1

使用CSS：

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

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

Answer 2

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

あなたのラインを作成するために、 a:after擬似を使用するよりも、ラインは、唯一 1/3幅をまたぐ必要がある場合

Answer 3

あなたのテキストに下線を与えるために、簡単な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> 

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