Css переход на навигационной панели

Question

Я хочу поставить переход к моей навигационной панели, и я не имею понятия, что делать. Как вы можете видеть на картинке, я хочу поместить цвет ниже к ссылке, такой как «HOME», когда наведите желтый цвет на экран, и когда он наведет на другую ссылку, он исчезнет, ​​а другой появится. Как я могу это сделать? Дайте мне некоторые идеи, пожалуйста.

Вот мой html-код.

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

вот мой код css.

.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

Вы можете сделать это с границами снизу. По умолчанию установите его прозрачно, дайте ему переход и затухайте его, например, на :hover.

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

Answer 2

Если единственное, что вы хотите, чтобы текст идти желтый при наведении курсора мыши, а затем добавить этот код:

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

Я создал скрипку: https://jsfiddle.net/virginieLGB/Lpdyqoy7/

Вы можете также добавьте переход, чтобы он выглядел немного прохладнее (я поставил его на оранжевый в скрипке, чтобы действительно увидеть разницу):

ul.nav.navbar-nav li a { 
    transition: color 1s ease; 
} 
ul.nav.navbar-nav li a:hover { 
    color: yellow; 
} 

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

А с "линии под":

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

Вот простой фрагмент того, что я думаю, что вы пытаетесь достичь.

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>