Rumah > Artikel > hujung hadapan web > jquery hover使用方法介绍

jquery hover使用方法介绍

黄舟asal: 2017-06-26 11:05:093816semak imbas

概述

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

参数

over,outFunction,FunctionV1.0

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

outObjectV1.4

当鼠标移到元素上或移出元素时触发执行的事件函数

示例

over,out 描述:

鼠标悬停的表格加上特定的类

jQuery 代码:

$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

out 描述:

hovre()方法通过绑定变量"handlerInOut"来切换方法。

jQuery 代码:

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

<style type="text/css">
.hover {background:red};
</style>

这里的addClass("hover")和removeClass("hover")里括号里的hover是不是只写hover ,写别的就不用，是不是这样的

首先回答是，不是必须是hover。

这个addClass里写hover是因为之前的CSS类选择器的名称是hover（就是.hover {background:red};）。这个名称可以改成别的。下边给你一个可以工作的代码：

<html>
<head>
<title>hover demo</title>
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myStyle {
    background: red
}
;
</style>
</head>
<body>
 
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
 
    <script>
        $("td").hover(function() {
            $(this).addClass("myStyle");
        }, function() {
            $(this).removeClass("myStyle");
        });
    </script>
 
</body>
</html>

Atas ialah kandungan terperinci jquery hover使用方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery如何使用undelegate去掉用delegate为动态创建元素绑定的事件？Artikel seterusnya：关于jQuery鼠标悬停事件.hover()的使用详解

Artikel berkaitan

Lihat lagi