更改悬停颜色CSS

问题描述：

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

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

用'：悬停{颜色：#XXXXXX;}' – LoicTheAztec

这个问题是缺乏的一个完整的例子问题和一旦你改变了现场，这个问题变得毫无用处。 – andyb

[HTML/CSS - 悬停链接颜色]的可能重复（http://stackoverflow.com/questions/15458313/html-css-hover-link-color） –

答

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

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

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

编号'！重要的'不是这里的答案，并且被认为是不好的做法。问题是'#service .header比'.header：hover'更具体。一种替代解决方案可能是使用'#section header：hover'作为悬停选择器。我建议阅读关于[CSS特异性]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity） – andyb

@andyb正是我要指出的。我认为你应该回答一下关于'CSS特定性'的问题，因为如果在'CSS'的某些属性没有改变时他总是使用'！important'，那么OP可能在不好的实践中循环。 –

@ Error404确定，完成。我希望我的评论足以提示编辑的回答......您的消息也突出显示了我在我的评论中搞砸了我的代码。我想这个问题无论如何都会被删除，因为这个问题没有持久的例子。 OP已经改变了现场！ – andyb

答

的问题是，#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?

答

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

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

相关推荐