jQuery-在多个CSS类上同时执行悬停操作将类“button hover”添加到鼠标悬停的“div”中。添加类“按钮悬停”和将鼠标悬停到“div”上的“button Round hover”类。_Jquery_Hover_Toggleclass_Oocss

jQuery-在多个CSS类上同时执行悬停操作将类“button hover”添加到鼠标悬停的“div”中。添加类“按钮悬停”和将鼠标悬停到“div”上的“button Round hover”类。

jquery

jQuery-在多个CSS类上同时执行悬停操作将类“button hover”添加到鼠标悬停的“div”中。添加类“按钮悬停”和将鼠标悬停到“div”上的“button Round hover”类。,jquery,hover,toggleclass,oocss,Jquery,Hover,Toggleclass,Oocss,在第二个div上，完成整个动画需要400毫秒：200毫秒用于按钮悬停切换，然后200毫秒用于按钮圆形悬停切换如何同时执行这些切换？注: 我使用的是OOCSS，所以按钮圆形扩展按钮，以及按钮圆形悬停扩展按钮悬停。我不想定义按钮圆形悬停几乎与按钮悬停完全相同，因为这不会很枯燥（不要重复），所以我在第二个div上使用了两个类和两个悬停调用这两个动作都需要200毫秒。我不想将它们中的任何一个设为0（瞬时）如果每个元素都有.button rounded类，并且也有.button类（这就是我所理解的

在第二个

div

上，完成整个动画需要400毫秒：200毫秒用于

按钮悬停

切换，然后200毫秒用于

按钮圆形悬停

切换如何同时执行这些切换？

注:

我使用的是OOCSS，所以
```
按钮圆形
```
扩展
```
按钮
```
，以及
```
按钮圆形悬停
```
扩展
```
按钮悬停
```
。我不想定义
```
按钮圆形悬停
```
几乎与
```
按钮悬停
```
完全相同，因为这不会很枯燥（不要重复），所以我在第二个
```
div上使用了两个类和两个悬停调用
```


这两个动作都需要200毫秒。我不想将它们中的任何一个设为0（瞬时）

如果每个元素都有.button rounded
类，并且也有.button
类（这就是我所理解的“button rounded extends button”），您应该只为button添加一个悬停手柄，并根据元素是否有button rounded类选择要切换的类。例如：
<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>

此外，还可以创建一个由空格分隔的类列表，这样您就可以同时切换多个类
注意：由于“over”和“out”函数都是相等的，您可以使用一个函数，它将应用于这两个事件。
如果每个元素都有.button rounded
类也有.button
类（这就是我所理解的“button rounded Extendes button”），您应该只为button添加一个悬停手柄，并根据元素是否具有button rounded类选择要切换的类。例如：
<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>

此外，还可以创建一个由空格分隔的类列表，这样您就可以同时切换多个类
注意：由于“over”和“out”函数都相等，因此您可以使用单个函数，它将应用于两个事件。
这应该可以做到：
javascript:
$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass(
            ($(this).hasClass('button-rounded') ? 'button-rounded-hover ' : '') +
            'button-hover',
            200
        );
    });
});

HTML:
将类“button hover”添加到鼠标悬停的“div”中。
将类“button hover”和类“button rounded hover”添加到鼠标悬停的“div”中。

注意从第二个div中删除class按钮，这可能需要重新定义两个类的CSS。
这应该可以做到：
javascript:
$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass(
            ($(this).hasClass('button-rounded') ? 'button-rounded-hover ' : '') +
            'button-hover',
            200
        );
    });
});

HTML:
将类“button hover”添加到鼠标悬停的“div”中。
将类“button hover”和类“button rounded hover”添加到鼠标悬停的“div”中。

请注意，从第二个div中删除class按钮
，这可能需要同时重新定义两个类的CSS。
？您的意思是希望两个动画响应同一事件吗？目前，您的代码为两个独立的、非嵌套的（因此是非冒泡的）事件建立了两个处理程序。@Beetroot Beetroot:是的，我希望在用户将鼠标移到元素上时同时添加这两个类。因此，将鼠标移到任何一个元素上都会使这两个元素都具有动画效果？@Beetroot Beetroot第二个div具有这两个类，因此，第一个处理程序适用于这两个。据我所知，OP希望让第一个按现在的方式运行，但第二个同时执行两种转换（按钮悬停和按钮圆形悬停）。现在，将鼠标移到第二个会激活两个处理程序，一次激活一个。@mgibsonbr是的，我有点慢。如果我现在理解正确，我下面的答案应该有效。同时？您的意思是希望两个动画响应同一事件吗？目前，您的代码为两个独立的、非嵌套的（因此是非冒泡的）事件建立了两个处理程序。@Beetroot Beetroot:是的，我希望在用户将鼠标移到元素上时同时添加这两个类。因此，将鼠标移到任何一个元素上都会使这两个元素都具有动画效果？@Beetroot Beetroot第二个div具有这两个类，因此，第一个处理程序适用于这两个。据我所知，OP希望让第一个按现在的方式运行，但第二个同时执行两种转换（按钮悬停和按钮圆形悬停）。现在，将鼠标移到第二个会激活两个处理程序，一次激活一个。@mgibsonbr是的，我有点慢。如果我现在理解正确，我下面的答案应该有效。但是在按钮圆形
元素上，我需要添加这两个类，因为按钮圆形悬停
扩展了按钮悬停
。如果我只添加了按钮圆形悬停
，则不会应用按钮悬停
中的所有样式。答案已更新。toggleClass接受以空格分隔的类名，例如“button hover button rounded hover”。将其传递给toggleClass将使两个动画同时进行。但是在按钮圆形
元素上，我需要添加两个类，因为按钮圆形悬停
扩展了按钮悬停
。如果我只添加了按钮圆形悬停
，则不会应用按钮悬停
中的所有样式。答案已更新。toggleClass接受以空格分隔的类名，例如“button hover button rounded hover”。将其传递给toggleClass将使两个动画同时进行。请参阅我上面关于OOCSS的注释。第二个div需要两个类。坦白说，我从来没有听说过OOCSS。基本上，所有按钮都有一定的规则。一些圆形按钮有一些额外的规则。我没有在这两个类中定义公共规则（重复您自己），而是在按钮中定义额外的规则，然后将这两个类应用于元素。面向对象的CSS。所以OOCSS不是一种不同的技术，它只是对级联的一种利用？没错。这是一种范式，不是一种语言。如果我在电脑上而不是iPhone上，我会引用一些参考资料。谷歌“OOCSS”和“Nicole Sullivan”
<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>