Question

我在导航栏上工作我的导航栏上的活动颜色不起作用.Hover工作正常但不是活动的。在浏览器时我选择toogle元素状态并单击活动浏览器更改单击活动状态时的颜色但在正常情况下，它不能正常工作。我很困惑，很困惑，有人可以帮我吗？提前谢谢。

＆＃13;

.main-nav {
  color: #FFF;
  width: 100%;
  background-color: #5e2d91;
  float: right;
  line-height: 42px;
  margin-top: -3px;
}
.main-nav ul li {
  display: inline;
  padding: 0px 10px;
}
.main-nav ul li a {
  color: #FFF;
  text-decoration: none;
  padding: 20px 14px;
}
.main-nav ul {
  margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
  background-color: #0098aa;
}
.main-nav ul li a:active {
  background-color: #0098aa;
}

＆＃13;

<nav class="main-nav">
  <ul>
    <li><a href="one.php"> Home </a>
    </li>
    <li><a href="transaction.php"> Trade Now</a>
    </li>
    <li><a href="view.php"> Transactions  </a>
    </li>
    <li><a href="chart.php"> Performance </a>
    </li>
    <li><a href="complete.php">History </a>
    </li>
    <li class="time">US Markets Open in&nbsp;<span id="hm_timer" class="style    colorDefinition size_sm">08:05:35</span>&nbsp;hours</li>
  </ul>
</nav>

＆＃13;

Answer 1

你的代码在fiddle上工作正常可能还有其他一些css覆盖你的代码

试试这个

body .main-nav ul li a:active{
   background-color:#0098aa;
}

如果不起作用，请尝试添加重要//不推荐

body .main-nav ul li a:active{
   background-color:#0098aa!important;
}

我建议你检查该链接上的元素并检查活动状态，可能还有其他一些css覆盖你的代码

Answer 2

在您的代码中，:active的背景颜色与悬停相同，因此它正常工作，但您无法看到它。将其更改为其他颜色，它会起作用。

如果是您的网站，我没有看到任何CSS选择器：active。你确定你已经在那里写了吗？

Answer 3

在您的网站marketinthepocket.com中，您提到背景颜色为白色。改变颜色会很有效。

body .main-nav ul li a:active {
    background-color: red;
}

Active不在css中的链接上工作

3 个答案: