jQuery text dekoration unterstreichen in navbar

Question

Wenn die Maus geben Sie eine der li Über Portfolio Kontakt, wie Text-Dekoration unterstreichen. Auch, wie man die Geschwindigkeit der Unterstreichung kontrolliert und was, wenn ich möchte nur 1/3 des Wortes durch Unterstreichung dekoriert werden? Denke ich richtig? Bitte helfen Sie!

<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

Verwenden CSS:

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

, wenn die Leitung sollte nur 1/3 die Breite überspannen als eine a:after Pseudo benutzen, um Ihre Linie

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

erstellen

Answer 3

können Sie einfach CSS :hover unterstreichen, um Ihren Text zu geben:

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

Für Artänderung Geschwindigkeit zu steuern, können Sie CSS transition verwenden. Stellen Sie sicher, dass Sie überprüfen, ob es mit der Eigenschaft funktioniert, die Sie ändern möchten. Wenn Sie nur einen Teil des Textes unterstreichen möchten, können Sie ein anderes Element darin erstellen, einige Stile hinzufügen, so dass es wie Unterstreichung aussieht und ihm die richtige Breite geben, und die Deckkraft bei Hover ändern.

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