Question

我有一个href，它有以下代码。

＆＃13;

   .calculate:active {
     background-color: red;
   }
   .calculate:hover {
     background-color: green;
   }

＆＃13;

<li class="calculate">
  <a href="calculate.html" style="font-size:18px">Calculator</a>
</li>

＆＃13;

当我按住计算器链接上的单击按钮时，它会将颜色更改为红色，当我释放单击时，它会返回绿色，然后页面加载到指定的calculate.html。当页面加载时，计算href的颜色变为红色。现在的问题是，当我保持点击按下href它变为红色，当我实际点击它然后它变回绿色并等待页面加载并变回红色。我希望它不要回到绿色，只有在点击它时才会变成红色。

Answer 1

:hover应在:active之前定义，而不是之后。另外，在链接上使用这些伪类，而不是在列表项上使用。

.calculate a:hover{
   background-color:green;
 }
.calculate a:active{
   background-color:red;
 }

如果您想在点击它之后将其变为红色，请使用:visited。 :active仅在您点击它时将其设为红色。必须在:visited类之前添加:hover伪类。

[编辑]

在你的评论之后，我理解你的意思。您说在链接页面加载之前，您在点击之后立即从红色转换为绿色。除非您使:hover和:active的样式相等，否则您将始终看到此转换。

Answer 2

如果我理解正确，您希望点击后链接保持红色。为此，您可以添加CSS类，如下所示：

＆＃13;

var link = document.querySelector(".calculate");
link.onclick = function(){
  this.classList.add("clicked");
}

＆＃13;

.calculate:active {
   background-color: red;
}
.calculate:hover {
   background-color: green;
}
.calculate.clicked {
   background-color: red;
}

＆＃13;

<li class="calculate">
  <a href="#" >Calculator</a>
</li>

＆＃13;

我的href的颜色在活动时不会改变

2 个答案: