悬停时，jQuery 将元素从一个类淡化到另一个类

Question

这可以做到吗？

例如。

.class1{
  background-image:(whatever.jpg)
  color: #fff;
}

.class2{
  background-image:(whatever2.jpg)
  color: #999;
}

我能否在鼠标悬停在元素上时将所有具有 class1 的元素淡化为 class2，并在鼠标移出时返回 class1？

Answer 1

如果您不想使用插件，您可以执行以下操作:

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});