14

我正在使用 CSS 过渡在鼠标悬停时为背景颜色设置动画。

我有以下代码:

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

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

此代码仅在鼠标打开时为背景颜色设置动画。它不会重新激活鼠标。我有两个问题:

  1. 如何使用 CSS 为鼠标设置动画?

  2. 我如何只使用 jQuery来做到这一点?

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

4

2 回答 2

24

1)你改变你的CSS

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

div:hover {
    background: green;

}

小提琴

将转换设置为元素,而不是伪类。


2)

使用 jQuery,您要么需要两个元素来交叉淡入淡出,要么需要一个彩色动画插件。jQuery UI 内置了彩色动画,然后你可以这样做:

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

小提琴

如果您还没有将 jQuery UI 用于其他用途,我建议您使用更小的插件之一,比如这个

于 2013-06-18T11:51:51.373 回答
3

这应该可以解决您的问题

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

div:hover {
    background-color: green;
}
于 2013-06-18T12:00:58.473 回答