Question

我正在尝试进行悬停效果，悬停后图像变暗，文本变亮。尽管图像变暗有效，但文本的不透明度没有改变。有人可以看看吗？我的网站是https://www.hirooaoy.com/

代码如下：

.image-overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 0.3s;
}

.sqs-dynamic-text {opacity: 0.2;}

.image-overlay:hover:after{
    opacity: 1;
}

.image-overlay:hover:after .sqs-dynamic-text{
  opacity: 0.8;
}

Answer 1

使用alpha值代替使用不透明度像仇敌0.2不透明度使用

rgba(0,0,0,0.2)

这里前三个参数是颜色（红色，绿色和蓝色），第四个参数是alpha

悬停效果同时影响图像/文本（网络）

1 个答案: