CSS 悬停时过渡颜色褪色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14350126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transition color fade on hover?
提问by J82
I am trying to get this h3to fade on hover. Can someone help me out?
我试图h3让它在悬停时消失。有人可以帮我吗？
HTML
HTML
<h3 class="clicker">test</h3>
CSS
CSS
.clicker {
-moz-transition:color .2s ease-in;
-o-transition:color .2s ease-in;
-webkit-transition:color .2s ease-in;
background:#f5f5f5;padding:20px;
}
.clicker:hover{
background:#eee;
}
回答by Austin Brunkhorst
What do you want to fade? The backgroundor colorattribute?
你想淡化什么？该background或color属性？
Currently you're changing the background color, but telling it to transition the color property. You can use allto transition all properties.
目前您正在更改背景颜色，但告诉它转换颜色属性。您可以使用all来转换所有属性。
.clicker {
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background: #f5f5f5;
padding: 20px;
}
.clicker:hover {
background: #eee;
}
Otherwise just use transition: background .2s ease-in.
否则只需使用transition: background .2s ease-in.
回答by Kailas
For having a trasition effect like a highlighter just to highlight the text and fade off the bg color, we used the following:
为了具有像荧光笔这样的过渡效果来突出文本并淡化背景颜色，我们使用了以下内容：
.field-error {
color: #f44336;
padding: 2px 5px;
position: absolute;
font-size: small;
background-color: white;
}
.highlighter {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
@keyframes fadeoutBg {
from { background-color: lightgreen; } /** from color **/
to { background-color: white; } /** to color **/
}
@-moz-keyframes fadeoutBg { /* Firefox */
from { background-color: lightgreen; }
to { background-color: white; }
}
@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
from { background-color: lightgreen; }
to { background-color: white; }
}
@-o-keyframes fadeoutBg { /* Opera */
from { background-color: lightgreen; }
to { background-color: white; }
}<div class="field-error highlighter">File name already exists.</div>