Question

嘿大家我正面对这个问题而且我似乎找不到任何解决方案。实际上我已经创建了一个下面给出的bootstrap下拉菜单。

<ul class="nav navbar-nav">
   <li><a href="#">Menu1</a></li>
   <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu drop-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
</ul>

我已经应用了下面给出的CSS。

.drop-menu a:hover{background-color:red!important;}

但当我将鼠标放在下拉菜单中的锚标记上时，背景颜色仍然是默认的（自举）

Answer 1

您只在链接上创建了鼠标悬停，在本例中为-bash: cd: mac: No such file or directory标记。尝试删除mac标记，然后将鼠标悬停在完整的菜单项上。示例代码。

<a>

如果你真的想要只在链接后面的背景，那么使用以下css。

<a>

Answer 2

.menu li a:hover{
  background-color:red!important;
}

<ul class="nav navbar-nav">
   <li><a href="#">Menu1</a></li>
   <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu drop-menu menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
</ul>

Answer 3

请试试这个：

.nav>.drop-menu>li>a:hover
{
  background-color:red;
  display:block:
}

Answer 4

找到了解决方案。

实际上，bootstrap会将背景图像添加到标记中。要删除它，我将以下代码添加到现有的css。

.drop-menu a:hover{background-color:red!important; background-image:none!important;}

悬停效果不适用于bootstrap下拉菜单中的锚标记？

4 个答案: