【jQuery入门】hover()方法操作总结

本篇文章我们来了解一下可以用jQuery轻松实现鼠标悬停处理的“hover()”方法！

hover()方法是什么？

首先我们先从“hover()”方法的基本知识开始学习！

hover() 方法可以确定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

使用“hover()”，可以触发例如下拉菜单或者工具提示等场景。

试着改变CSS

现在让我们来实际学习一下使用“hover()”的编程方法吧！

一般的描述方法是在参数中指定函数，如“对象元素.hover（函数1，函数2）”。

“函数1”是对象元素和鼠标光标重叠时的处理，“函数2”离开时的处理。

JavaScript代码如下：

$('button').hover(
    function() {
 
       //鼠标光标重叠时的处理
 
    },
    function() {
 
        //鼠标光标离开时的处理
 
    }
);

像这样鼠标光标在第一个函数内重叠时的处理，离开时第二个函数处理。

根据上述内容，我们来看一个具体的例子：

<body>
<button>按钮</button>
 
<script>
$('button').hover(
    function() {
        
        //鼠标光标重叠时的处理
        $('button').css('background-color', '#00f');
        
    },
    function() {
        
		//鼠标光标离开时的处理
        $('button').css('background-color', '#f00');
        
    }
);
</script>
</body>

在本例中放置了一个按钮元素，并判断鼠标光标是否在该按钮上。

使用“css()”方法更改按钮的背景颜色，具体取决于光标是重叠还是离开。

当光标重叠时，背景颜色变为“蓝色”，如下所示:

【jQuery入门】hover()方法操作总结第1张

当光标离开时，背景颜色变为"red"。

【jQuery入门】hover()方法操作总结第2张

这样就可以通过使用“hover()”方法轻松实现鼠标悬停处理了！

只使用一个函数

之前我们指定了两个函数作为“hover()”的参数，但实际上，即使只有一个也可以。

需要注意的是在这种情况下，当鼠标光标悬停在元素上和离开时，会执行相同的功能。

相反如果想在任何一种情况下执行相同的功能，这是使用它的最佳方式。

实例：

<body>
<button>按钮</button>
 
<script>
$('button').hover(
    function() {
        
		//准备颜色组
        var colors = ['#f00', '#0f0', '#00f', '#f0f', '#0ff', '#ff0'];
 
		//生成随机数
        var rnd = Math.floor(Math.random() * colors.length);
        
 
		//更改背景色
        $('button').css('background-color', colors[rnd]);
        
    }
);
</script>
</body>

在这个例子中我们只为hover()指定了一个函数，以便在光标反复时执行相同的函数。

在函数内部，按钮的背景颜色准备在一个数组中，以便颜色随机变化。

换句话说，当我们正在制作一个按钮，当鼠标光标重叠并离开时，该按钮会更改为随机背景颜色。

释放“hover()”

现在我们来看看如何取消我们设置的“hover()”方法的事件处理！

一般来说，jQuery 提供了一个“off()”方法来取消事件处理。

但是即使你这样写，hover() 也不会被释放！

$('button').off('hover');

正如我们在开始时解释的那样，hover()方法始终是将“mouseenter/mouseleave”总结为一个的方法。

因此要解除hover()的事件处理，请记述方式！

$('button').off('mouseenter mouseleave');

通过分别执行“mouseenter / mouseleave”和“off()”方法，可以取消hover()事件处理。

利用“on”实现hover

我们之前解释过 hover() 触发 mouseenter 和 mouseleave 事件。

现在让我们看看我们如何利用“on()”方法来获得与 hover() 相同的功能！

“on()”可以在参数中描述多个事件过程。

语法：

$(selector).on(event,childSelector,data,function)

如果你利用了这个特性，可以很容易地实现和 hover() 一样的事件处理！

<body>
<button>按钮</button>
 
<script>
    $('button').on({
        'mouseenter': function() {
 
            console.log('鼠标重叠了！');
 
        },
        'mouseleave': function() {
 
            console.log('鼠标离开了！');
 
        }
    })
</script>
</body>

在此示例中“mouseenter / mouseleave”事件处理在 on() 方法的参数中指定。

当鼠标光标与元素重叠时执行“mouseenter” ，离开时执行“ mouseleave ”。

为什么hover()不起作用

如果某些条件重叠，就会出现“hover()”不能正常工作的现象，所以我来介绍一下！

这个“特定条件”是当你尝试 hover()一个来由 jQuery后添加的元素时。

实例：

<body>
 
<script>
$('button').hover(
    function() {
        console.log('重叠');
    },
    function() {
        console.log('离开');
    }
)
 
$('body').append('<button>按钮</button>');
</script>
</body>

在此示例中可以看到使用“append()”添加了按钮元素。

然后为此按钮使用 hover() 执行事件处理，但它不能正常工作。

因为程序从上到下运行，所以当你 hover() 时，“按钮元素”还不存在。

如果你在 hover() 之前写“append()”，那么它是可以正常执行的。

但是在实际编程中一个一个地考虑执行顺序是很麻烦的，而且可能会导致bug的产生。

这里我们可以使用on()方法，“on()”方法具有可以对后添加的元素执行事件处理的特性。

实例：

<body>
 
<script>
$('body').on({
    mouseenter: function() {
        console.log('重叠');
    },
    mouseleave: function() {
        console.log('离开');
    }
}, 'button')
 
$('body').append('<button>按钮</button>');
</script>
</body>

在本例中“append()”用于后添加“按钮元素”，事件处理通过“on()”方法。

需要注意的是on()的写法，on()的语法是$(selector).on(event,childSelector,data,function)，在这种情况下 “按钮”被指定为参数，因为我们希望将事件处理与按钮元素相关联。

这样一来，即使后添加按钮元素，事件处理也会成功执行。

本文来源：词雅网

本文地址：https://www.ciyawang.com/jq-76.html

本文使用「署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。