Как сделать перемычки наведения CSS на анимацию мыши и мыши и скопировать ее в jQuery?

Я использую CSS-переходы для анимации цвета фона при наведении мыши.

У меня есть следующий код:

HTML

<div>
</div>

CSS

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

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

Этот код только анимирует цвет фона при включении мыши. Он не оживляет мышь. У меня есть 2 вопроса:

  • Как изменить анимацию мыши с помощью CSS?

  • Как это сделать, используя только jQuery?

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

Прошу прощения за мой плохой английский.

Ответы

Ответ 1

1) Вы меняете свой css на

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

div:hover {
    background: green;

}

FIDDLE

установка перехода к элементу, а не псевдокласс.

2)

С jQuery вам понадобятся два элемента для перекрестного затухания или плагин цветной анимации. Пользовательский интерфейс jQuery имеет встроенную цветную анимацию, а затем вы можете:

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

FIDDLE

Если вы еще не используете jQuery UI для чего-то другого, я бы предложил использовать один из гораздо меньших плагинов, например этот!!

Ответ 2

Это должно решить вашу проблему.

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

div:hover {
    background-color: green;
}