Question

这是html

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="home.html" class="navbar-brand" style="padding-top: 0;margin-top: 0">Name</a>
    </div>
    <div class="collapse navbar-collapse" id="homenavbar">
        <ul class="nav navbar-nav pull-right hidden-xs hidden-sm" id="menu">
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#services">SERVICES</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#testimonial">TESTIMONIAL</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>
</div>
</nav>`

这是css

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
border-bottom: 3px solid green;
color: #009ddc;
}

但悬停和焦点不起作用。我找不到问题。有人请帮忙。

Answer 1

#menu li > a:hover, #menu li:hover >a{
  color:red;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
  
        <ul class="nav navbar-nav pull-right" id="menu">
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#services">SERVICES</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#testimonial">TESTIMONIAL</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>
</div>
</nav>

试试这个:)如果你想用javascript做“活跃课”

Answer 2

除了结束</nav>标记外，您的代码是正确的。我已将您的代码复制并粘贴到JSFiddle中，并且悬停正常。

无法设置导航栏链接引导程序的样式

2 个答案: