如何实现通过CSS点击某个元素后，不会受到hover的影响？

如何解决如何实现通过CSS点击某个元素后，不会受到hover的影响？

我想问你一个 CSS 问题。我的英语不好，但我尽量完整地表达出来！今天希望把点击后的背景改成红色，不要有hover效果（现在hover会变黄过去）。如果我不使用javascript和jquery，只使用CSS，我该怎么做？

感谢大家提前收看，我真的需要你们的帮助！

前

$('.button').on('click',function(){
  $(this).toggleClass('red');
})

.button {
  width: 100px;
  height: 100px;
  border: 1px solid #222;
  text-align: center;
}
.button:hover {
  background-color: yellow;
}

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">123</div>
<div class="button">123</div>

解决方法

要实现您的要求，您需要使 .red 选择器更加具体，以便它不会被 :hover 状态覆盖。

在这种情况下，您可以通过在它前面加上 .button

来实现它

$('.button').on('click',function() {
  $(this).toggleClass('red');
})

.button {
  width: 100px;
  height: 100px;
  border: 1px solid #222;
  text-align: center;
}

.button:hover {
  background-color: yellow;
}

.button.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">123</div>
<div class="button">123</div>

需要注意的一点是，在这种情况下，人们经常使用或建议使用 !important 标志来覆盖样式。然而，这不是一个好方法，因为这意味着应用了标志的样式不能通过特殊性轻易地被覆盖。因此，维护和调试会变得更加困难。

有关 CSS 选择器特性的更多信息，请参阅有关该主题的 this answer。

有一个已知的 CSS 选择器 :active 当点击任何元素时，CSS 的这部分会被激活。在 W3 Schools 上阅读更多相关信息。