JQuery之hover(over, out)方法

最新推荐文章于 2021-03-26 22:00:13 发布

__HelloWorld__

最新推荐文章于 2021-03-26 22:00:13 发布

阅读量5.2k

点赞数 1

分类专栏：前端文章标签： Jquery Hover

本文链接：https://blog.csdn.net/kangkanglou/article/details/25649053

版权

前端专栏收录该内容

51 篇文章

订阅专栏

hover(over, out)

概述

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

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

参数

overFunction

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

outFunction

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

示例

描述:

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

jQuery 代码:

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

示例代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IIPATest._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a id="slidePicLink" οnclick="" href="#">
            <img style="border: #bab6b7 0 solid; display: inline; filter: revealtrans(duration=1.0,transition=23);"
                id="slidePic" name="slidePic" alt="" src="../images/ad.jpg" class="focuspic" />
        </a>
    </div>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#slidePic").hover(function () {
                alert("悬停");
            }, function () {
                alert("离开");
            })
        })
    </script>
    </form>
</body>
</html>