56

我试图h3让它在悬停时消失。有人可以帮我吗?

HTML

<h3 class="clicker">test</h3>

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

2 回答 2

107

你想淡化什么?backgroundorcolor属性?

目前您正在更改背景颜色,但告诉它转换颜色属性。您可以使用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;
}

否则只需使用transition: background .2s ease-in.

于 2013-01-16T01:44:51.017 回答
2

为了具有像荧光笔这样的过渡效果,只是为了突出显示文本并淡出背景颜色,我们使用了以下内容:

.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>

于 2019-10-23T15:00:45.900 回答