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