浅谈jQuery hover(over, out)事件函数

简介

hover(over, out) 是 jQuery 的鼠标事件函数之一，用来处理当鼠标移到一个元素上或移出一个元素时触发的事件。这个函数在 jQuery 1.0 中就已经加入。

在基本用法中，这个函数接受两个参数，第一个是当鼠标移入元素时触发的事件处理函数（例如 mouseover），第二个是当鼠标移出元素时触发的事件处理函数（例如 mouseout）。

示例

示例 1

在这个示例中，我们定义了两个事件处理函数，当鼠标移到一个元素上时会把元素的背景色设置为黄色，当鼠标移出元素时会把元素的背景色设置为灰色。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery hover() 示例</title>
    <style type="text/css">
        .hover-example {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            display: inline-block;
            margin: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="hover-example"></div>
    <div class="hover-example"></div>
    <div class="hover-example"></div>
    <script>
        $('.hover-example').hover(
            function() {
                $(this).css('background-color', 'yellow');
            },
            function() {
                $(this).css('background-color', '#ccc');
            }
        );
    </script>
</body>
</html>

示例 2

在这个示例中，我们定义的事件处理函数包含了对目标元素的多种操作。当鼠标移到一个元素上时会把元素的背景色设置为红色并缩小元素，同时显示一个提示框；当鼠标移出元素时会把元素的背景色设置为灰色并放大元素，同时隐藏提示框。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery hover() 示例</title>
    <style type="text/css">
        .hover-example2 {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            display: inline-block;
            margin: 10px;
            position: relative;
        }
        .hover-tips {
            display: none;
            position: absolute;
            top: -20px;
            left: -10px;
            padding: 3px;
            background-color: #999;
            color: #fff;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="hover-example2"></div>
    <div class="hover-example2"></div>
    <div class="hover-example2"></div>
    <script>
        $('.hover-example2').hover(
            function() {
                $(this).css('background-color', 'red');
                $(this).animate({
                    'width': '90px',
                    'height': '90px'
                });
                $(this).find('.hover-tips').fadeIn(200);
            },
            function() {
                $(this).css('background-color', '#ccc');
                $(this).animate({
                    'width': '100px',
                    'height': '100px'
                });
                $(this).find('.hover-tips').fadeOut(200);
            }
        ).append('<div class="hover-tips">这是一个提示框</div>');
    </script>
</body>
</html>

在这个示例中，我们使用了 jQuery 的 animate() 函数来缓慢改变元素的大小，并使用 find() 函数来找到提示框元素并对其进行操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈jQuery hover(over, out)事件函数 - Python技术站

浅谈jQuery hover(over, out)事件函数

浅谈jQuery hover(over, out)事件函数

简介

示例

示例 1

示例 2

相关文章