background color hover fade effects

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?

I'm assuming English is not your first language? Do you mean that you want the `background-color` to *remain coloured* for one second after the mouse leaves the element? — David Thomas, Jun 04 '14 at 10:26
http://jsfiddle.net/8eBvj/.. This fiddle might give you an idea — Pranav, Jun 04 '14 at 10:30

Fabrizio Calderan · Accepted Answer · 2014-06-04T11:04:08.957

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

@user3706524 you're welcome. if this answer was useful you could upvote and/or mark it as accepted. — Fabrizio Calderan, Jun 04 '14 at 10:46
here the code http://jsfiddle.net/96jYZ/1/. I want it will be dimmed and become like the background's color and not will be more and more bright. — Omer, Jun 04 '14 at 11:24

Shaunak D · Answer 2 · 2014-06-04T10:39:37.140

0

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.

edited Jun 04 '14 at 10:39

answered Jun 04 '14 at 10:33

Shaunak D

20,588
10
46
79

score 0 · Answer 3 · answered Jun 04 '14 at 10:34

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:

score 0 · Answer 4 · answered Jun 04 '14 at 10:38

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/

background color hover fade effects

4 Answers4