悬停时更改链接的文本颜色和背景颜色答案

【问题标题】：Change the text color and background color of the links when hovered悬停时更改链接的文本颜色和背景颜色
【发布时间】：2021-03-18 10:41:18
【问题描述】：

我想在悬停时更改链接的文本颜色和背景颜色？背景颜色改变但文字不改变颜色

CSS：

.choice-container { 
    display: flex; 
    margin-bottom: 0.5rem; 
    width: 100%; 
    font-size: 1.8rem; 
    color: rgb(255, 238, 0); 
    background-color: rgb(0, 0, 0); 
    border: 0.1rem solid rgb(255, 238, 0); 
}

.choice-container:hover { 
    cursor: pointer; 
    transform: translateY(-0.1rem);
    transition: transform 150ms; 
    color: rgb(0, 0, 0) !important; 
    background-color: rgb(255, 238, 0); 
    border: 0.1rem solid rgb(255, 255, 255); 
    box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
}

【问题讨论】：

尝试在颜色后面加上!important
别听那个。 !important 不是解决方案。这是一种在不实际解决问题的情况下摆脱问题的方法。如果你有一个标准的设计模板并且想要覆盖它，它应该只用于模板。
在没有 !important 的情况下运行您的代码，它可以完美运行。您是否已经清除了缓存？您的 HTML 代码有错别字吗？您提供的 CSS 没有错误。它工作正常，甚至不必使用！important

标签： css colors hover

【解决方案1】：

它似乎没有任何错误。

.choice-container {
  display: flex;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 1.8rem;
  color: rgb(255, 238, 0);
  background-color: rgb(0, 0, 0);
  border: 0.1rem solid rgb(255, 238, 0);
}

.choice-container:hover {
  cursor: pointer;
  transform: translateY(-0.1rem);
  transition: transform 150ms;
  color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 238, 0);
  border: 0.1rem solid rgb(255, 255, 255);
  box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
}

&lt;a href = "https://www.google.com" class="choice-container"&gt;Google&lt;/a&gt;

在这里，它在 jsfiddle 中：https://jsfiddle.net/kt1wzv08/

不悬停时：

悬停时：

【讨论】：