更改悬停颜色 CSS

Question

在此 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;
}

Answer 1

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

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

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

Answer 2

问题是 #service .header 是 more specific than .header:hover so the more specific rule is always overriding the :hover. See CSS: Specificity Wars 一些选择器如何组合以相互覆盖。

一种解决方案是使用 #section header:hover 作为悬停动态伪 class

的选择器

#section header:hover {
  background: red;
}

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

Answer 3

您可以使用下面的 CSS 来更改悬停颜色。至于所有的主要 div 与 class "box" 和内部宽度与 class "header"

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

更改悬停颜色 CSS

Changing Hover Color CSS

html

css

hover