Question

我遇到问题：在菜单项上悬停psuedo。我使用Bootstrap并使用自己的样式表覆盖。我在社区上对此进行了一些研究，并发现我无法应用：hover到内联块元素，但这是一个块元素。我想也许引导类在某种程度上凌驾于：hover，但我在html头中的boostrap.css之后调用了我的custom.css所以......

此处为my fiddle，代码如下。

＆＃13;

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.navbar-default .navbar-nav li a:hover {
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color: #009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}

＆＃13;

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item nav-item-register" href="#register">Register</a>
    </li>
  </ul>
</div>
<!--/.navbar-collapse -->

＆＃13;

非常感谢任何线索和/或帮助，谢谢！

Answer 1

您的CSS选择器与给定代码中的任何元素都不匹配。是否有更多缺少的代码（即<div id="navbar" class="navbar-collapse collapse">的任何父元素？

.navbar-default .navbar-nav li a:hover与任何元素都不匹配，因为没有navbar-default类的元素。

如果在此代码块周围添加<div class="navbar-default">，则可以正常工作;在这里小提琴：https://jsfiddle.net/wcso43a1/2/。完整代码：

<div class="navbar-default">
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item nav-item-register" href="#register">Register</a>
               </li>
           </ul>
    </div><!--/.navbar-collapse -->
</div><!-- end of navbar-default -->

<!-- CSS -->

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.navbar-default .navbar-nav li a:hover{
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color:#009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}

Answer 2

你可以这样做：

.nav-item:hover {
  color: pink;
}

更新了Fiddle

Answer 3

只需使用.nav-item:hover作为悬停的选择器（而不是.navbar-default .navbar-nav li a:hover

＆＃13;

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.nav-item:hover {
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color: #009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}

＆＃13;

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item nav-item-register" href="#register">Register</a>
    </li>
  </ul>
</div>
<!--/.navbar-collapse -->

＆＃13;

CSS：hover pseudo无法处理导航项

3 个答案: