Animieren Maus lassen sich mit CSS und jQuery?

Ich bin mit CSS-transitions animieren, hintergrund-Farbe auf Maus hover.

Ich habe den folgenden code:

CSS:

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

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

HTML:

<div></div>

Dieser code nur animiert, die background-Farbe auf der Maus auf. Es muss nicht reanimieren Sie die Maus deaktivieren. Ich habe 2 Fragen:

  1. Wie kann ich das animieren mit der Maus aus mit CSS?

  2. Wie mache ich das mit jQuery nur?

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

InformationsquelleAutor Monkey D Luffy | 2013-06-18
  1. 24

    1) ändern Sie Ihre css

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

div:hover {
    background: green;

}

    GEIGE

    Einstellung den übergang auf das element, und nicht die pseudo-Klasse.

    2)

    Mit jQuery müssen Sie die zwei Elemente, cross fade, oder eine Farbe, animation plugin. jQuery-UI Farbe-animation eingebaut, und dann können Sie tun :

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

    GEIGE

    Wenn Sie nicht bereits mit jQuery UI für etwas anderes, ich würde vorschlagen, mit einem der viel kleineren plugins, wie diese eine !!

    InformationsquelleAutor adeneo
  2. 3

    Dies sollte Ihr problem lösen

    div {
    width: 100px;
    height: 100px;  
    background-color: red;
    transition: background-color 0.5s;
}

div:hover {
    background-color: green;
}
    InformationsquelleAutor mohkhan
Schreibe einen Kommentar