How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?


Tags: jquery,css3,css-transitions

Problem :

I am using CSS transitions to animate a background colour on mouse hover.

I have the following code:

HTML

<div>
</div>

CSS

div {
    width: 100px;
    height: 100px;  
    background: red;
}

div:hover {
    background: green;
    transition: all 0.5s ease-in-out;
}

This code only animates the background colour on mouse on. It doesn't reanimate the mouse off. I have 2 questions:

  1. How do I animate the mouse off using CSS?

  2. How do I do this using jQuery only?

jsfiddle: http://jsfiddle.net/fz39N/

Please excuse my bad English.



Solution :

1) You change your css to

div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: background 0.5s ease-in-out;
}

div:hover {
    background: green;

}

FIDDLE

setting the transition to the element, and not the pseudo class.


2)

With jQuery you'll either need two elements to cross fade, or a color animation plugin. jQuery UI has color animation built in, and then you can do :

$('div').on({
    mouseenter: function() {
        $(this).animate({backgroundColor: 'green'},1000)
    },
    mouseleave: function() {
        $(this).animate({backgroundColor: 'red'},1000)
    }
});

FIDDLE

If you're not already using jQuery UI for something else, I'd suggest using one of the much smaller plugins, like this one !!


    CSS Howto..

    How to separate header from content

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    How to get the value of css property with jQuery

    how to prevent css inherit?

    Added ellipsis for long text but it showing below the text

    How to check a css propert is supported?

    How to remove flexbox default padding/margin/pagemargin?

    How do you create tabstops in XHTML?

    How can I make the text stop moving when one DIV opens?

    How to design a cross client / browser compatible email?

    How to remove default border of button in jquery mobile?

    How to echo individual css classes for li's?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    • centered, not moving down.. unsure why / how to fix

    How to Change HTML Tags Using Javascript

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How do I make footer take 100% of the width of the webpage?

    How to make background fill or flush to the footer at the bottom of the window

    How to hide the first element on the page with particular css class? [duplicate]

    How to stop one layer going over another

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    How can I align my paragraphs in CSS/bootstrap properly?

    How to position a html element under a fixed div

    How do I control the wrapping of these
  • items?
  • How can I add some css to center certain divs if they are using the same css style? [duplicate]

    How to toggle display: inline and display toggle?

    How to modify one element of a class without bothering the rest with the same CSS class?

    How to make common reusable css for almost every common things in web design?

    When I say position:fixed, how do I tell mobile browsers I mean it?

    how to use .css to add an address to the end of every .html page?