在我的网站上,我展示了很多框,最多 60 个。每个框都可以悬停并有自己的颜色。我通过以下js意识到这一点:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).css('background-color') },
1000);
});
});
当一个盒子悬停时,它应该得到#68BFEF作为背景色,当鼠标离开盒子时,颜色应该变成它的旧值。
这是我应用css的方式:
<div id="primary">
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
....
</div>
我的问题是悬停效果应该更快,颜色应该变化更快。另一个问题是不是所有的盒子都有旧的背景颜色。
有任何想法吗?