jQuery - 多个 CSS 类的同时悬停动作

Question

$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass('button-hover',200);
    },function() {
        $(this).toggleClass('button-hover',200);
    });
});
$(document).ready(function() {
    $('.button-rounded').hover(function() {
        $(this).toggleClass('button-rounded-hover',200);
    },function() {
        $(this).toggleClass('button-rounded-hover',200);
    });
});

---

<div class="button">Add class `button-hover` to this `div` on mouse over.</div>
<div class="button button-rounded">Add class `button-hover` and 
    class `button-rounded-hover` to this `div` on mouse over.</div>

---

在第二个div 上，整个动画需要 400 毫秒：button-hover 切换需要 200 毫秒，button-rounded-hover 切换需要另外 200 毫秒。 如何同时执行这些切换？

注意事项：

• 我正在使用 OOCSS，所以button-rounded 扩展了button，而button-rounded-hover 扩展了button-hover。我不想定义button-rounded-hover 几乎与button-hover 完全一样，因为那不会很干燥（不要重复自己）所以这就是为什么我在第二个div 上使用两个类和两个悬停调用.
• 这两个动作都需要 200 毫秒。我不想将它们中的任何一个设为 0（瞬时）。

Answer 1

如果每个具有.button-rounded 类的元素也有.button 类（这就是我对“按钮圆形扩展按钮”的理解），你应该只为按钮添加一个悬停句柄，并选择要切换的类基于您的元素是否具有按钮圆形类。示例：

$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass(
            ($(this).hasClass('button-rounded') ? 'button-rounded-hover ' : '') +
            'button-hover',
            200
        );
    });
});

toggleClass 还接受由空格分隔的类列表，因此您可以通过这种方式同时切换多个类。

注意：由于 "over" 和 "out" 函数是相等的，您可以使用单个函数，它将同时应用于两个事件。

Answer 2

应该这样做：

javascript：

$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass('button-hover',200);
    });
    $('.button-rounded').hover(function() {
        $(this).toggleClass('button-hover button-rounded-hover',200);
    });
});

HTML：

<div class="button">Add class `button-hover` to this `div` on mouse over.</div>
<div class="button-rounded">Add class `button-hover` and class `button-rounded-hover` to this `div` on mouse over.</div>

注意从第二个 div 中删除类 button，这可能需要重新定义这两个类的 CSS。