主页按钮在颜色错误时悬停[关闭]答案

【问题标题】：Main page button is hovering when in wrong color [closed]主页按钮在颜色错误时悬停[关闭]
【发布时间】：2015-12-09 00:46:12
【问题描述】：

.nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-bottom: 7px solid;
  border-bottom-color: #ff3300;
  width: 80%;
}
.nav li {
  float: left;
}
.nav li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav li a:hover {
  background-color: #111;
}
.onpage {
  background-color: #ff3300;
}
.onpage:hover {
  background-color: #ff3300;
}

<div class="nav">
  <ul>
    <li class="onpage"><a href="/">Home</a>
    </li>
    <li><a href="/register.php">Register</a>
    </li>
  </ul>
</div>

那么我如何移除悬停或使其悬停到与主页按钮边框底部相同的颜色？

【问题讨论】：

你不能给我们按钮吗？
请使用相关代码编辑您的原始问题。让它可读，看看这里的其他问题是什么样子的。你甚至可以编写一个代码 sn-p。
好多了，最后一步是告诉我们问题是什么，您希望它是什么。
请不要在问题末尾添加感谢行。这与问题本身无关。相反，您应该告诉我们什么不起作用以及您的问题是什么。您没有充分解释问题。

标签： html css

【解决方案1】：

问题是您有一些冲突的 CSS 规则。

在您的示例中，以下规则：

.nav li a:hover {background-color: #111;}

比

具有更高的特异性

.onpage {background-color: #ff3300;}

因此深灰色背景会覆盖橙色/红色背景。

您可以通过如下方式覆盖深灰色来解决此问题：

.nav li.onpage a {background-color: transparent;}

还有其他方法可以实现相同的目标。

在这种情况下不需要使用!important 规则。

.nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-bottom: 7px solid;
  border-bottom-color: #ff3300;
  width: 80%;
}
.nav li {
  float: left;
}
.nav li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav li a:hover {
  background-color: #111;
}
.onpage {
  background-color: #ff3300;
}
.nav li.onpage a {
  background-color: transparent;
}

<div class="nav">
  <ul>
    <li class="onpage"><a href="/">Home</a>
    </li>
    <li><a href="/register.php">Register</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

只需将此规则添加到 CSS 的底部

.onpage,
.onpage a:hover {
   background-color: #ff3300 !important;
}

【讨论】：

@RichardOlsenSandberg 试试看。
但我建议不要添加!important。只是增加特异性。
@ManojKumar 这就像它应该适合我的使用一样，因为我也使用 JS 属性，只是为了在类之间进行更改......