html - 悬停完成后，CSS 会淡出

Question

我对 css 和 html 很陌生，所以我认为这可能是一个简单的问题。

我有一个 block ，当鼠标悬停在它上面并且前面有文本时它会变暗 但我无法获得淡出动画。

参见 jsfiddle

.block1 {
    width:320px;
    height:320px;
    background-color:red;
}

.block1text {
    width:320px;
    height:320px;
    font-family:Raleway;
    font-weight:700;
    text-align:center;
    font-size:25pt;
    color:#eee;
    line-height:320px;
    letter-spacing:2px; 
    position:absolute;
}

.block1:hover > .overlay {
    width:320px;
    height:320px;
    position:absolute;
    background-color:#000;
    opacity:0.5;

    -o-transition:.4s ease;
    -ms-transition:.4s ease;
    -moz-transition:.4s ease;
    -webkit-transition:.4s ease;
    transition:.4s;
}

Answer 1

目前，您的 CSS 过渡仅在 block1 处于悬停状态时应用。我通过为叠加层提供一些基本样式(包括过渡)并仅更改 block1 悬停上的几个属性来使其工作。参见 jsfiddle .

可以把它想象成“在任何时候，我都希望覆盖元素的任何属性更改都具有 0.4 秒的过渡效果”。

以下是 CSS 更改:

.block1 > .overlay {
    width:320px;
    height:320px;
    position:absolute;

    -o-transition:.4s ease;
    -ms-transition:.4s ease;
    -moz-transition:.4s ease;
    -webkit-transition:.4s ease;
    transition:.4s;    
}

.block1:hover > .overlay {
    background-color:#000;
    opacity:0.5;
}