Question

我对css和html相当新，所以我认为这可能是一个简单的问题。

我有一个块，当它悬停在它前面的文字时会变暗但我无法获得淡出动画。

.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处于悬停状态时应用。我通过给叠加层提供了一些基本样式（包括转换）并且只在块1悬停时改变了几个属性。请参阅jsfiddle。

将其视为“在任何时候，我都希望对overlay元素进行任何属性更改，以获得0.4s的过渡效果”。

以下是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;
}

Answer 2

仅在您的css中添加此内容：

.overlay {
  display: block;
  position: absolute;
  z-index: 2;
  width: 320px;
  height: 320px;
  color: #fff;
  background-color: #000;
  opacity: 0;
  -webkit-transition: all 250ms ease-in;
  -moz-transition: all 250ms ease-in;
  -ms-transition: all 250ms ease-in;
  -o-transition: all 250ms ease-in;
    transition: all 250ms ease-in;
}

悬停时Css淡出

2 个答案: