Css Übergang auf navbar

Question

Ich mag einen Übergang zu meinen navbar setzen, und ich habe keine Ahnung, was zu tun. Wie Sie dem Bild sehen können, möchte ich unten eine Farbe wie "HOME" setzen, wenn die gelbe Farbe angezeigt wird und wenn sie auf einen anderen Link schwebt, wird sie verschwinden und der andere erscheint. Wie kann ich das machen? Gib mir bitte ein paar Ideen.

Hier ist mein HTML-Code.

   <nav class="navbar navbar-default navbar-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
       <span class="icon-bar" ></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <img class="img-responsive" src="images/brandz.png" > 
     </div> 

    <div class="collapse navbar-collapse" id="nav-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Students</a></li> 
      <li><a href="#">Faculty</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">Contact us</a></li> 

     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
        <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
        <!-- Modal --> 
         <div id="myModal" class="modal fade" role="dialog"> 
          <div class="modal-dialog"> 
        <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <img src="images/logo.png" class="logo"> 
           </div> 
           <div class="modal-body"> 
            <p>Some text in the modal.</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 
          </div> 
         </div> 
     </ul> 
    </div> 
</div> 
</nav> 

hier ist mein CSS-Code.

.navbar-default .navbar-nav > li > a { 
    font-weight: 300; 
    color: #949494; 
    display: block; 
    padding: 3px 20px 5px 60px; 
    border-bottom: 3px solid transparent; 
    line-height: 97px; 


    } 
    .navbar-default{ 
    background-color:#fff; 

    } 
    .nav>li>a { 
    position: relative; 
    } 
    .navbar-default .navbar-right > li > a { 
    padding-left: 70px; 
    padding-right: 1px; 
    } 
    .navbar-default .navbar-toggle .icon-bar { 
    background-color: #000000; 
    margin:0 0 4px; 
    width: 25px; 
    height: 5px; 

    } 
    @media (max-width: 768px) { 
    .img-responsive{ 
    width: 300px; 
    height:50px; 
    padding-left:50px; 
    } 
    } 
    @media (max-width: 376px) { 
    .img-responsive{ 
    width: 220px; 
    height:50px; 
    padding-left: 20px; 
    } 
    } 
    @media (max-width: 286px) { 
    .img-responsive{ 
    width: 180px; 
    height:50px; 
    padding-left: 5px; 
    } 
    } 

Answer 1

Sie können es mit einem Rand unten zu tun. Setzen Sie es standardmäßig auf transparent, geben Sie ihm einen Übergang und blenden Sie es zum Beispiel unter :hover ein.

https://jsfiddle.net/n6uz5yj3/1/

Answer 2

Wenn das einzige, was Sie für den Text auf schweben zu gehen gelb ist, dann fügen Sie diesen Code:

ul.nav.navbar-nav li a:hover { 
    color: yellow; 
} 

ich die Geige erstellt haben: https://jsfiddle.net/virginieLGB/Lpdyqoy7/

Sie können füge auch einen Übergang hinzu, um es etwas kühler aussehen zu lassen (Ich habe es auf Orange in der Geige gesetzt, um wirklich den Unterschied zu sehen):

https://jsfiddle.net/virginieLGB/Lpdyqoy7/1/

Und mit der "Linie unter":

ul.nav.navbar-nav li a { 
    transition: all 1s ease; 
} 
ul.nav.navbar-nav li a:hover { 
    color: yellow; 
    border-bottom: 1px solid yellow; 
} 

https://jsfiddle.net/virginieLGB/Lpdyqoy7/2/

Answer 3

Hier ist ein einfaches Snippet, was ich denke, Sie versuchen zu erreichen.

ul { 
 
    background: #3366FF; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 0; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    padding: 50px 50px; 
 
    text-decoration: none; 
 
    border-bottom: 2px solid transparent; 
 
} 
 
li a:hover { 
 
    color: #33FF66; 
 
    border-bottom: 2px solid #33FF66; 
 
}

<ul> 
 
    <li><a href="">Home</a> 
 
    </li> 
 
    <li><a href="">Students</a> 
 
    </li> 
 
    <li><a href="">Faculty</a> 
 
    </li> 
 
    <li><a href="">About Us</a> 
 
    </li> 
 
    <li><a href="">Contact Us</a> 
 
    </li> 
 
</ul>