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而不是.header:hover，因此更具体的规则始终会覆盖:hover。请参阅CSS: Specificity Wars，了解一些选择器如何相互覆盖。

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

#section header:hover {
  background: red;
}

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

Answer 3

您可以使用下面的CSS来更改悬停颜色。至于所有的主要div是类“盒子”和内部宽度与类“标题”

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

更改悬停颜色CSS

3 个答案: