悬停问题导航栏（HTML / CSS）

Question

我已经创建了一个导航栏，我只想在非活动的页面上使用悬停选择器。所以我使用了选择器a:not(.active):hover，但它不起作用。如果有人能帮助我，我真的很感激。

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:block;
    position:absolute;
    top:-2px;
    left:0;
    right: 0;
    background-color: darkred;
}

li 
{
    float: left;
}

li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 20px 23px;
    text-decoration: none;
}

li a:not(.active):hover
{
    background-color: #B22222;
}

.active {
    background-color: #470005;
}

<ul>
                <li class="active"><a href="home.html">Home</a></li>
                <li><a href="#about">About me</a></li>
                <li><a href="#contacts">Contacts</a></li>
                <li><a href="#help">Help</a></li>
                <li><a href="#other">Other Works</a></li>
                <li><a href="#news">News</a></li>
</ul>

Answer 1

您的：不是伪课程在您的链接上。但是，活动类在li上。

li:not(.active) a:hover应该有效

JSfiddle示例：https://jsfiddle.net/ubntkk46/

Answer 2

此修复：

  

li：not（.active）：悬停一个{

     

}

完整代码：

#myTextArea {
    min-width: 50px;
    min-height: 60px; 
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display:block;
  position:absolute;
  top:-2px;
  left:0;
  right: 0;
  background-color: darkred;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 23px;
  text-decoration: none;
}

li:not(.active):hover a {
  background-color: #B22222;
}

.active {
  background-color: #470005;
}

Answer 3

该类与您的li元素相关联，而不是超链接

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  background-color: darkred;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 23px;
  text-decoration: none;
}

li:not(.active) a:hover {
  background-color: #B22222;
}

.active {
  background-color: #470005;
}

＆＃13;

<ul>
  <li class="active"><a href="home.html">Home</a></li>
  <li><a href="#about">About me</a></li>
  <li><a href="#contacts">Contacts</a></li>
  <li><a href="#help">Help</a></li>
  <li><a href="#other">Other Works</a></li>
  <li><a href="#news">News</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以将相同的背景颜色应用于有效a标记，并将有效a标记悬停状态，并将不同的背景颜色应用于非有效a标记悬停状态。这将允许它在IE8中工作，因为旧版本的IE不支持:not。

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:block;
    position:absolute;
    top:-2px;
    left:0;
    right: 0;
    background-color: darkred;
}

li 
{
    float: left;
}

li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 20px 23px;
    text-decoration: none;
}

li a:hover {
    background-color: #B22222;
}

li.active a, li.active a:hover {
    background-color: #470005;
}

<ul>
  <li class="active"><a href="home.html">Home</a></li>
  <li><a href="#about">About me</a></li>
  <li><a href="#contacts">Contacts</a></li>
  <li><a href="#help">Help</a></li>
  <li><a href="#other">Other Works</a></li>
  <li><a href="#news">News</a></li>
</ul>