Question

悬停时，我无法在悬停时将背景从0不透明度转换为0.6。这是我的CSS：

.work--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 1;
    z-index: 1;
    transition: background 0.3s ease-in-out;
}

    .work--overlay:hover {
        background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
        transition: background 0.3s ease-in-out;
    }

我还应该提一下，效果确实对悬停有效，只是过渡缓动部分不起作用。所以我99％肯定这是一个CSS的东西。

Answer 1

之前我遇到过这个问题。我添加了一个:: before伪类来转换不透明度而不是背景。基本上，您创建一个位于实际类下面的前类（请参阅位置和z-index的更改）。然后当它悬停时，它会使图层可见。

preventDefault

Answer 2

对您的代码进行了一些更改，主要是针对不透明度并从hover状态中删除了转换：

 ...

    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .work--overlay:hover {
      opacity:1;
      background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    }

这里有一个工作过渡：https://jsfiddle.net/g6a0b2zg/

径向渐变背景未正确过渡

2 个答案: