Bootstrap导航悬停不起作用

Question

我试图在悬停时改变颜色，但它不起作用请帮助我这耗尽我的时间

＆＃13;

＆＃13;

nav div ul li:hover
{
  background-color: red;
}

//when i tried the answer they gave

.navbar .dropdown >li>a:hover{
  background:red;
}

please view the image for result

＆＃13;

<nav class="navbar" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="default_profile"><img src="assets/img/default_user.png"/></i>&nbsp;&nbsp;Username <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="fas fa-user fa-sm"></i>&nbsp;&nbsp;Profile</a></li>
            <li><a href="#"><i class="fas fa-cog fa-sm"></i>&nbsp;&nbsp;Settings</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="fas fa-lock fa-sm"></i>&nbsp;&nbsp;Logout</a></li>
          </ul>
        </li>
       
      </ul>
    </div>
  </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它应该在

a:hover { background-color: red; }

因为你的目标是锚标签而不是li项目。

Answer 2

通过右键单击元素并单击chrome，firefox和IE等浏览器中的inspect，可以轻松找到元素名称。以下应该有效。

.navbar-nav>li>a:hover{
  background:red;
}

如果您想要更具体，可以像下面这样说明：

.navbar-nav>li>a.dropdown-toggle:hover{
  background:red;
}