Question

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

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

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

我有像这样的jQuery代码：

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

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

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

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

Answer 1

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();
    }
});

Answer 2

AH-HA！

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

看，我已经有了需要第一个悬停的元素，以及需要第二个的元素，所以当我有需要两个的元素时，目标是没有第三个悬停在那个场景中。代码不重用和复杂！ BOO！

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

解决方案是这样的：

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

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

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

jQuery - 悬停函数，有一个元素的两个类，每个类的悬停

2 个答案: