Question

我想过渡到我的导航栏，我不知道该怎么做。正如你可以看到的那样，我想在下面添加一个颜色，如＃34; HOME＆＃34;当悬停时，将出现黄色，当它悬停到另一个链接时，它将消失，另一个将出现。我怎样才能做到这一点？请给我一些想法。

这是我的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

以下是我认为您正在努力实现的简单片段。

＆＃13;

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

＆＃13;

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

＆＃13;

导航栏上的Css转换

3 个答案: