现在的位置: 首页 > 综合 > 正文

hover事件

2017年12月18日 ⁄ 综合 ⁄ 共 1270字 ⁄ 字号 评论关闭

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

 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发指定的第二个函数。

而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

参数 :
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数

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

jQuery 代码:

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

如下实例:
比如我们要实现当光标移动到a标签上时,a标签向右移动一段距离,离开时a位置恢复。实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script src="/Scripts/jquery-1.7.1.min.js"></script>
    <script  type="text/javascript">
        $(document).ready(function () {
            $("#catagory a").hover(
                function () {
                $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
                },
            function () {
                $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
            }
            );
        });
    </script>
</head>
<body>
    <div>
        <ul id="catagory">
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Asp.net</a></li>
            <li><a href="#">Sql Server</a></li>
            <li><a href="#">CSS</a></li>
        </ul>
    </div>
</body>
</html>

抱歉!评论已关闭.