background color hover fade effects - html

Question

Using this css code
#onec-fourth:hover {
background-color: #F36DE1;
color: white;
}
I want that when I move the mouse off the object (#onec-fourth),
for the background color & the color text will persist for 1 second.
Because right now, when I move my mouse off it is stopped.
How do I make the :hover effect persist a short duration?

Answer 1

This kind of task can be easily realized with a simple CSS transition, no Javascript is needed (unless you need to support older browsers, but the basic effect will work anyway):
Example: http://codepen.io/anon/pen/nzLkf (tested on Firefox29 and Chrome35)
CSS code
#onec-fourth {
width: 300px;
height: 300px;
border: 2px dashed #ddd;
-webkit-transition: all 0s linear 1s;
-moz-transition: all 0s linear 1s;
-ms-transition: all 0s linear 1s;
transition: all 0s linear 1s;
}
#onec-fourth:hover{
background-color:#F36DE1;
color:white;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
For a fade-out effect (after 1 second) see instead http://codepen.io/anon/pen/AkCcm
(use transition: all 1s linear 1s and transition: all 0s linear 0s on :hover):
just play with with transition-duration and transition-delay values as you prefer, until you achieve the optimal result.
Further information on CSS transitions can be found on MDN

Answer 2

As a simple demonstration of the technique that might help you:
#onec-fourth {
background-color: #fff;
/* vendor prefixes stripped for brevity;
sets the transition for the background-color property: */
transition: background-color 1s linear;
transition-delay: 1s; /* delays that transition for 1 second */
}
#onec-fourth:hover {
background-color: #ffa;
}
JS Fiddle demo.
References:
CSS transitions.
transition-delay.

Answer 3

if you want to apply more styles than just one you may use addClass/removeClass:
<style>
.hov {
background-color:#F36DE1;
color:white;
}
</style>
and jquery code:
<script>
$(document).ready(function () {
$("#onec-fourth").mouseenter(function () {
$("#onec-fourth").addClass("hov");
});
$("#onec-fourth").mouseleave(function () {
setTimeout(function () {
$("#onec-fourth").removeClass("hov");
}, 1000);
});
});
</script>
http://jsfiddle.net/6zSJa/8/

Answer 4

Demo Fiddle
var self;
$('#onec-fourth').mouseover(function(){
self = $(this);
self.css('background-color','red');
}).mouseleave(function(){
setTimeout(function(){
self.css('background-color','blue');
},1000);
});
Using jQuery setTimeout() , mouseover() and mouseleave(). Check the links for more details.