javascript - 将悬停、onmouseetner、onmouseleave 函数添加到 css 类、语法

Question

我在基本语法方面遇到问题。我想使用 jquery 来选择 CSS 类中的所有元素，然后在用户将鼠标悬停在项目上时添加一个动作

$(".item").hover(function(){$(this).fadeTo(100, .1)});

是否也可以为 onmouseenter 和 onmouseleave 分配不同的功能？我在查找类似代码时遇到了一些麻烦。

Answer 1

使用.hover()，您可以传递两个函数。

$(".item").hover(
    function(){$(this).fadeTo(100, .1)},
    function(){$(this).fadeTo(100, 1)}
);

这些将被分配为mouseenter和mouseleave事件。

---

当然你也可以手动完成。

$(".item").mouseenter(function(){$(this).fadeTo(100, .1)})
          .mouseleave(function(){$(this).fadeTo(100, 1)});

---

或者您甚至可以重用相同的函数，并且只测试事件对象。

$(".item").hover(function(event){
    $(this).fadeTo(100, event.type === 'mouseenter' ? .1 : 1);
});

Answer 2

是的，有可能。

$(".item").hover( function(){ /* onmouseenter */ }, function(){/* onmouseleave */} );

Answer 3

hover可以采用一两个事件处理程序。如果提供了一个（如您的示例中所示），它将同时应用于mouseenter和mouseleave事件。如果提供了两个，则每个事件都有自己的处理程序。

更多信息在文档中。

从您的示例的外观来看，我假设您想将元素淡入 on mouseleave，如果是这样，请尝试以下操作：

$(".item").hover(
    function(){ $(this).fadeTo(100, .1) },
    function(){ $(this).fadeTo(100, 1)} ); 
);