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

Question

我想问你一个 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>

Answer 1

要实现您的要求，您需要使 .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关于这个问题。