Question

我想在悬停或点击时让导航按钮改变颜色。但问题是，无论我做什么，我似乎无法使其发挥作用。引导程序导航与CSS不同，我不知道我在哪里犯了错误。

这是我的代码，任何帮助或建议将不胜感激。

HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav navbar-nav">
  <li><a href="index.html" >HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li><a href="resume.html">RESUME</a></li>
  <li><a href="contact.html">CONTACT</a></li>
  </ul>
  </div>
  </nav>

这是我的CSS：

.container-fluid{
margin-left: 30em;
}

.navbar-brand{
max-width:100px;
padding-left: 10px;
}

.navbar-default {
background-color: #f8f8f800; 
border-color: #e7e7e700;
}

.navbar-default .navbar-nav>li>a {
color: #faebd7;
}

.navbar-nav>li>a {
padding-top: 40px;
padding-bottom: 15px;
font-size: 1.8em;
font-weight: bold;    
}

Answer 1

如评论所示，您没有声明:hover类。如果不将悬停放在元素上，则无法进行颜色更改。

此代码已经过测试，可以达到您想要的效果：

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav navbar-nav">
  <li><a class="link" href="index.html" >HOME</a></li>
  <li><a class="link" href="about.html">ABOUT</a></li>
  <li><a class="link" href="resume.html">RESUME</a></li>
  <li><a class="link" href="contact.html">CONTACT</a></li>
  </ul>
  </div>
  </nav>

CSS：

 .container-fluid{
    margin-left: 5em;
    }

    .navbar-brand{
    max-width:100px;
    padding-left: 10px;
    }

    .navbar-default {
    background-color: #f8f8f800; 
    border-color: #e7e7e700;
    }

    /** For simplicity of the example I added a class to your link tag. See the hover effect below **/

    .link {

      color: #faebd7;
      transition: all 0.5s ease-in-out; 
    }

    .link:hover {

      color: red; 

    }

    .navbar-nav>li>a {

    font-size: 1.8em;
    font-weight: bold;    
    }

亲眼看看：https://jsfiddle.net/billy_farroll/hnff1xw1/

引导导航悬停或单击

1 个答案: