0

我不确定这是嵌入在我的代码中某处的不同问题，还是我不知道的悬停功能问题 -

简而言之，我有一个包含两个类的元素

<input type="image" class="classA classB" ... />

我有这样的jQuery代码：

$('classA').hover(){
    function1,
    function2
}

$('classB').hover(){
    function3,
    function4
}

我想要的是，当您将鼠标悬停在输入上时，两个悬停函数（function1，function3）都会被触发。当你离开它时，两个函数（function2，function4）也会被触发。似乎正在发生的事情是classB悬停完全覆盖或阴影，或者你有什么classA悬停功能。

这是预期的行为（或者这是否表明我的更大的代码库有问题？），如果是这样，普遍的共识是什么？

4

2 回答 2

3

在标签同时具有两个类的情况下， classB' 悬停会覆盖classA' 悬停，因为它们的写入顺序（在classB' 悬停之后classA的悬停）。

一个解决方案可能是：

$('.classA, .classB').hover(
// mouseover
function() {
    var $this = $(this);
    if($this.hasClass('classA')) {
        function1();
    }
    if($this.hasClass('classB')) {
        function3();
    }

},
// mouseout
function() {
    var $this = $(this);
    if($this.hasClass('classA')) {
        function2();
    }
    if($this.hasClass('classB')) {
        function4();
    }
});
于 2012-10-04T11:57:53.650 回答
0

啊哈！

好的，所以 sp00m 的回答很好而且正确——但这并不完全符合我的目的。因为我有相当多的代码在运行，我希望保持“干净”（干净？）。我可能应该在最初的问题中更清楚......

看，我已经有了需要第一次悬停的元素和需要第二次悬停的元素，所以当我有需要这两种元素的元素时，目标是不为该场景进行第三次悬停。代码不可重用和复杂性！嘘！

我没有意识到最后的悬停会覆盖第一个悬停。这可能与它针对一个班级的事实有关，而第一个班级针对的是另一个班级。

解决方案是这样的： 

$('.classB, .classA').hover(){
    function3,
    function4
}

令人高兴的是，当我使用多重选择器定位 classA 时，它不会覆盖原始悬停。

也就是说，我从输入的类属性中删除了 classB，并将 classA 添加到悬停选择器！

于 2012-10-04T13:19:31.500 回答