Question

我尝试制作如下所示的导航div，但是当我将鼠标悬停在活动链接上时，它仍会获得灰色背景而不是红色背景。我怎么能改变这个？我不想改变活动链接的红色背景。

ImageData

    #navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: black;
    }

    #navigation li {
      float: left;
    }

    #navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #navigation li a:hover {
    background-color: grey;
    }

    #navigation .active,
    #navigation .active:hover {
    background-color: red;
    }

Answer 1

使用您的有效样式，您定位的是li，而不是a。将a添加到您的选择器中：

#navigation .active a,
#navigation .active a:hover {
    background-color: red;
}

Answer 2

试试这个只有一行改变，

＆＃13;

#navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: black;
    }

    #navigation li {
      float: left;
    }

    #navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #navigation li a:hover {
    background-color: grey;
    }

    #navigation .active a,
    #navigation .active:hover a{
    background-color: red;
    }

＆＃13;

<div id="navigation">
    <ul>
      <li class="active"><a href="#">home page</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Page2</a></li>
      <li><a href="#">Page3</a></li>
    </ul>
  </div>

＆＃13;

您还可以使用:not(.active) a

的#navigation .active a内容

Answer 3

要将悬停更改为红色，请将其应用于当前设置为灰色的#navigation li a:hover。

Answer 4

更改此

#navigation li a:hover {
background-color: grey;
}

到

#navigation li a:hover {
background-color: red;
}

Answer 5

我会尝试从CSS的第一部分删除#navigation .active,，然后查看它是否有效。您也可以删除#navigation，因为.active类只有1个实例。

导航活动链接背景改变鼠标悬停

5 个答案: