• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • hover()

    将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。

    .hover(handlerIn(eventObject), handlerOut(eventObject))
    • hover(handlerIn(eventObject), handlerOut(eventObject))
    .hover(handlerInOut(eventObject))
    • hover(handlerInOut(eventObject))

    hover(handlerIn(eventObject), handlerOut(eventObject))

    将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。

    .hover(handlerIn(eventObject), handlerOut(eventObject))
    • handlerIn(eventObject)类型:Function()。当鼠标指针进入元素时触发执行的事件函数
    • handlerOut(eventObject)类型:Function()。当鼠标指针离开元素时触发执行的事件函数

    .hover()方法是同时绑定mouseentermouseleave事件。我们可以用它来简单地应用在鼠标在元素上行为。

    调用$(selector).hover(handlerIn, handlerOut)是以下写法的简写:

    $(selector).mouseenter(handlerIn).mouseleave(handlerOut);
    

    更多细节参见.mouseenter().mouseleave()

    例子

    当鼠标在列表中来回滑动的时候添加特殊的样式, try:

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      ul { margin-left:20px; color:blue; }
      li { cursor:default; }
      span { color:red; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li class='fade'>Chips</li>
     
        <li class='fade'>Socks</li>
      </ul>
    <script>
    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      },
      function () {
        $(this).find("span:last").remove();
      }
    );
     
    //li with fade class
    $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
     
    </script>
     
    </body>
    </html>
    
    • Milk
    • Bread
    • Chips
    • Socks

    当鼠标在表格单元格中来回滑动的时候添加特殊的样式, try:

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

    解除绑定上面的例子中使用:

    $("td").unbind('mouseenter mouseleave');
    

    hover(handlerInOut(eventObject))

    将一个单独事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。

    .hover(handlerInOut(eventObject))
    • handlerInOut(eventObject)类型:Function()。当鼠标指针进入或离开元素时触发执行的事件函数

    当传递给.hover()方法一个单独的函数的时候,将执行同时绑定mouseenter.mouseleave()事件函数。这允许在处理函数中用户使用jQuery的各种切换方法或响应处理程序内的不同的event.type

    调用$(selector).hover(handlerInOut)是以下写法的简写:

    $(selector).bind("mouseenter mouseleave", handlerInOut);
    

    更多细节参见.mouseenter().mouseleave()

    例子

    向上或向下滑动显示或隐藏下一个兄弟 LI 节点,并切换样式。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      ul { margin-left:20px; color:blue; }
      li { cursor:default; }
      li.active { background:black;color:white; }
      span { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
        <li>Milk</li>
        <li>White</li>
        <li>Carrots</li>
        <li>Orange</li>
        <li>Broccoli</li>
        <li>Green</li>
      </ul>
    <script>
    $("li")
    .filter(":odd")
    .hide()
     .end()
    .filter(":even")
    .hover(
      function () {
        $(this).toggleClass("active")
          .next().stop(true, true).slideToggle();
      }
    );
    </script>
     
    </body>
    </html>
    
    • Milk
    • White
    • Carrots
    • Orange
    • Broccoli
    • Green

    上篇:contextmenu()

    下篇:mouseup()