Question

我有一些div（盒子），当你将鼠标悬停在它们上面时，会应用一个淡入的彩色叠加层，当鼠标离开div区域时淡出。

单独使用CSS3，如何调整我的代码以执行以下操作：在悬停时，使用快速转换淡入覆盖，然后当鼠标离开悬停区域时，保持覆盖可见1秒（即暂停），然后慢慢淡出。

这是一个有效的JSfiddle：http://jsfiddle.net/yrzx7/

使用CSS代码：

div.box {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}

div.box img {
    width: 100%;
    height: auto;
}

div.box .details {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .85);
color: #fff;
opacity: 0;


/* Fade out */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;

-ms-transition: opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 250ms;

-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;

-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}



div.box .details:hover {
opacity: 1;

/* Fade in */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;

-ms-transition:opacity;
ms-transition-timing-function: ease-out;
ms-transition-duration: 250ms;

-moz-transition:opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;

-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}

Answer 1

您可以将transition-delay: 1s;添加到淡出过渡。

像这样 - Demo

CSS3在悬停时淡入，暂停，淡出

1 个答案: