Question

我试图在CSS上使用：hover：beth鼠标悬停在div上时在div上应用过渡效果，这样它可以创建深色覆盖，但是不幸的是没有过渡发生。它只是上色和下色而没有褪色效果，就好像没有应用过渡一样。

这里是fiddle。

我将过渡应用于每个元素。我还尝试了:: before而不是：before，并且当然添加了所有浏览器支持（我正在使用chrome）。尝试仅在背景颜色上进行过渡也不会起作用。请告诉我我在做什么错。预先感谢。

HTML：

<div class="container">
    <!-- ... -->
</div>

CSS：

.container{
    border: solid 1px #000;
    padding: 50px;
    position: relative;
}

.container:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    transition: all 3s ease;
}

.container:hover:before{
    display: block;
    background-color: rgba(0, 0, 0, 0.2);
}

Answer 1

问题是“显示”不可转换。如果您要从display:none迁移到display:block，则不能使用任何过渡；

.container:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    pointer-events:none; /* So it won't be clickable */
    transition: all 3s ease;
}

.container:hover:before{
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.2);
}

伪元素上的CSS过渡不适用于简单的背景颜色更改

1 个答案: