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 style an input that is a type=“button”?

    How can I base one CSS setting on another?

    How to HTML/CSS Limit / Clip / Mask an object?

    How to add and use jquery and css file in joomla module..?

    how can i force all rows in a table to have the same height

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    how to see which CSS class is applied or where is that font-size coming from, from which class or tag

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to apply css style on the list of div by defending on the class name using javascript

    How to code CSS for all browsers in jQuery.css() method?

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to use Javascript in a innerHTML inline css scenario?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to make accessible h1 with logo

    How can i get List items to stay together using CSS?

    How to align text vertically equal top CSS

    Can User-Agent affect how CSS is rendered on a page?

    How to select every 4th div inside another div CSS Selector [closed]

    Calculating percentages for 10 or more images in a CSS3 slideshow

    How to add a css class to jquery selectable

    How to get CSS triangles to display in a row instead of vertical

    How to add a broccoli plugin to ember-cli app with live-reload?

    How to apply CSS styles only to the text-content of a block-level element?

    How to implement this kind of blur effect?

    How to Dynamically create a CSS class using AngularJS

    CSS in CKEDITOR - How to make a HTML code like

    display in red color?

    How to use css with jsp's

    How to put those things next to eachother? CSS

    How generate width html element to fill rest of width window