1

I have a number of divs (boxes) that when you hover over them apply a coloured overlay that fades in and fades out when the mouse leaves the div area.

Using CSS3 alone, how do I adapt my code to do the following: On hover, fade overlay in with a fast transition then when the mouse leaves the hover area, keep the overlay visible for 1 second (i.e. pause it), then fade it out slowly.

Here's a working JSfiddle: http://jsfiddle.net/yrzx7/

Working CSS code:

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;
}
4

1 回答 1

4

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

像这样 -演示

于 2013-05-24T11:39:24.507 回答