Question

当我将鼠标悬停在它们上面时，我正在使用CSS将链接设置为红色。单击它们将打开一个新选项卡，但我的链接将保持悬停（红色）。是否可以通过点击按钮取消悬停？这看起来非常糟糕，特别是在移动设备上。

CSS:
a:hover {
color: red;
}

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

Answer 1

我们刚刚点击它并且没有点击任何其他地方后，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>

Answer 2

单击时，您可以在没有悬停或点击的情况下将类添加到具有原始背景颜色的按钮。

（此示例使用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/

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

2 个答案: