[英]Changing Hover Color CSS
In this Website there are 4 tabs at the home page. 在此网站的主页上有4个选项卡。 How can i change the green-blueish color when i hover the mouse on a tab?
将鼠标悬停在选项卡上时,如何更改绿蓝色?
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;
}
Add following css rule at the end of your css
file to change background-color
. 在
css
文件的末尾添加以下css规则以更改background-color
。 important
is needed because it is already being used in your css
. important
是必需的,因为它已在您的css
。 So we need to use it again to override previous styling. 因此,我们需要再次使用它来覆盖以前的样式。
Note: use of !important
is considered bad practice and it should be avoided as much as we can. 注意:使用
!important
被认为是不好的做法,应尽可能避免使用。
.header:hover {
background: #7cedd7 !important;
}
The problem is that #service .header
is more specific than .header:hover
so the more specific rule is always overriding the :hover
. 问题是,
#service .header
是更具体的比.header:hover
,因此更具体的规则总是重写:hover
。 See CSS: Specificity Wars on how some of the selectors combine to override each other. 有关某些选择器如何组合以相互替代的信息,请参见CSS:Specificity Wars 。
One solution could be to use #section header:hover
as the selector for the hover dynamic pseudo class 一种解决方案是使用
#section header:hover
作为悬停动态伪类的选择器
#section header:hover {
background: red;
}
Note: adding !important
is considered bad practice - see What are the implications of using "!important" in CSS? 注意:添加
!important
被认为是不好的做法-请参阅在CSS中使用“!important”的含义是什么?
You can use below CSS to change the hover color. 您可以使用下面的CSS更改悬停颜色。 As for all for the main div is with class "box" and inner width with the class "header"
至于所有的主要股利是类“框”和内部宽度类“头”
.box. header:hover {
background: #7cedd7;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.