如何使用CSS/JavaScript在链接上取消悬停

How do I unhover on a link using CSS/JavaScript?

本文关键字：链接 取消 悬停 JavaScript 何使用 CSS      更新时间：2023-09-26

我使用CSS将鼠标悬停在链接上时设置为红色。点击它们会打开一个新的标签页，但是我的链接将保持悬停(红色)。它是可能的悬停在一个按钮点击?这看起来真的很糟糕，尤其是在移动端。

CSS:
a:hover {
color: red;
}
HTML:
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a>

链接的状态，即a标签是focus后，我们刚刚点击了它，并没有点击其他任何地方。所以，最有可能你想改变你的锚标记的: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>

一种方法是在单击按钮时，您可以在其未悬停或单击时为具有原始背景颜色的按钮添加类。

(本例使用Jquery) 

$('.button').click(function() {
	$(this).addClass('button-onclick');
})
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100%;
}
.button:hover {
  background-color: green;
}
.button-onclick:hover {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">clickers</div>

小提琴

https://jsfiddle.net/Hastig/hL4dt60k/

相关文章：