如何使用CSS/JavaScript取消链接？

当我将鼠标悬停在链接上方时，我使用CSS将链接设置为红色。单击它们将打开一个新选项卡，但我的链接将保持悬停状态（红色）。是否可以通过单击按钮来取消覆盖？这看起来很糟糕，尤其是在手机上

CSS:
a:hover {
color: red;
}

HTML:
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a>

CSS:
a:悬停{
颜色：红色；
}
HTML:

链接的状态，即，

a

标记在我们刚刚单击它并且没有单击其他任何地方之后，是

焦点

。因此，您很可能希望更改锚定标记的

：focus

状态的样式

CSS:
a:hover {
color: red;
}
a,
a:focus
{
  color: green; /* or whichever is your default color */
}

/* You can also add same or different style for a:visited state, which applies to anchor tags which have been visited */

HTML:
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a>

CSS:
a:悬停{
颜色：红色；
}
A.
a:焦点
{
颜色：绿色；/*或默认颜色*/
}
/*您还可以为：visited状态添加相同或不同的样式，这适用于已访问的锚定标记*/
HTML:

一种方法是单击，当按钮未悬停或单击时，您可以将具有原始背景颜色的类添加到按钮中

（本例使用Jquery）

$（'.button'）。单击（函数（）{
$（this.addClass（'button-onclick'）；
})

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
保证金：0；
}
.按钮{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：200px；
高度：200px；
背景色：红色；
边界半径：100%；
}
.按钮：悬停{
背景颜色：绿色；
}
.按钮onclick:悬停{
背景色：红色；
}

clickers

我相信它的状态是焦点而不是悬停。你可以为焦点状态添加不同的样式。我认为你必须使用

a:focus{some css}

！此外，如果您愿意，您可以设置

a:visted

-状态的样式。@MohitBhardwaj我尝试了focus和visted两种方式，但在移动设备上似乎效果不太好。在iOS safari上，如果我打开一个指向具有移动版本的网站的链接（打开linkedin网站会打开linkedin应用程序），然后切换回safari，该链接仍将保持红色。有没有办法在点击后解除焦点？@iamarnold如果你点击其他链接或代码上的其他地方，红色会消失？@MohitBhardwaj是的，如果我点击某个地方，红色会消失，但是如果用户必须点击其他地方才能使焦点消失，在手机上看起来就不太好了。@iamarnold尝试使用

a:focus{color:green！important；}

。我认为：专注应该可以解决您的问题，但某些东西可能会覆盖您的风格。因此，添加

！important

应该会有所帮助。