更改悬停颜色 CSS答案

【问题标题】：Changing Hover Color CSS更改悬停颜色 CSS
【发布时间】：2016-05-17 18:08:31
【问题描述】：

在这个Website 主页上有4 个标签。当我将鼠标悬停在选项卡上时，如何更改蓝绿色？

a {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
a {
    color: #00e1b6;
    line-height: inherit;
    text-decoration: none;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

【问题讨论】：

与a:hover { color:#xxxxxx;}
这个问题缺少一个完整的问题例子，一旦你改变了现场，这个问题就没有用了。
HTML / CSS - Hover Link Color的可能重复

标签： html css hover

【解决方案1】：

在 css 文件末尾添加以下 css 规则以更改 background-color。需要important，因为它已在您的css 中使用。所以我们需要再次使用它来覆盖之前的样式。

注意：使用!important 被认为是不好的做法，应尽可能避免。

.header:hover {
    background: #7cedd7 !important;
}

【讨论】：

没有。 !important 不是这里的答案，被认为是不好的做法。问题是 #service .header is more specific than .header:hover. One alternate solution could be to use #section header:hover` 作为悬停的选择器。我建议阅读CSS specificity
@andyb 正是我要指出的。我认为你应该回答CSS specifity，因为当CSS 的某些属性没有改变时，如果他总是使用!important，那么OP 可能会陷入不良做法。
@Error404 好的，完成。我希望我的评论足以提示答案编辑......您的消息还强调我搞砸了我在评论中转义的代码。我认为这个问题无论如何都会被删除，因为没有持久的问题示例。 OP已经改变了直播网站！
是的，我同意important 不好用。我建议它只是因为它已经在以前的开发人员编写的 css 中使用了

【解决方案2】：

问题是#service .header 是more specific 而不是.header:hover，所以更具体的规则总是覆盖:hover。请参阅CSS: Specificity Wars，了解一些选择器如何组合以相互覆盖。

一种解决方案是使用#section header:hover 作为悬停动态伪类的选择器

#section header:hover {
  background: red;
}

注意：添加 !important 被认为是不好的做法 - 请参阅 What are the implications of using "!important" in CSS?

【讨论】：

【解决方案3】：

您可以使用下面的 CSS 来更改悬停颜色。至于所有的主 div 是“box”类，内部宽度是“header”类

.box. header:hover {
    background: #7cedd7;
}

【讨论】：