{"name":"hover","type":"method","title":".hover()","deprecated":null,"removed":null,"desc":"Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.","categories":["events/mouse-events","version/1.0"],"entries":[{"return":"jQuery","signatures":{"added":"1.0","argument":[{"desc":"A function to execute when the mouse pointer enters the element.","name":"handlerIn(eventObject)","type":"Function"},{"desc":"A function to execute when the mouse pointer leaves the element.","name":"handlerOut(eventObject)","type":"Function"}]},"examples":[{"desc":"To add a special style to list items that are being hovered over, try:","code":"\n$( \"li\" ).hover(\n  function() {\n    $( this ).append( $( \"<span> ***</span>\" ) );\n  }, function() {\n    $( this ).find( \"span:last\" ).remove();\n  }\n);\n\n$( \"li.fade\" ).hover(function() {\n  $( this ).fadeOut( 100 );\n  $( this ).fadeIn( 500 );\n});\n","css":"\n  ul {\n    margin-left: 20px;\n    color: blue;\n  }\n  li {\n    cursor: default;\n  }\n  span {\n    color: red;\n  }\n","html":"\n<ul>\n  <li>Milk</li>\n  <li>Bread</li>\n  <li class=\"fade\">Chips</li>\n  <li class=\"fade\">Socks</li>\n</ul>\n"},{"desc":"To add a special style to table cells that are being hovered over, try:","code":"\n$( \"td\" ).hover(\n  function() {\n    $( this ).addClass( \"hover\" );\n  }, function() {\n    $( this ).removeClass( \"hover\" );\n  }\n);\n"},{"desc":"To unbind the above example use:","code":"\n$( \"td\" ).off( \"mouseenter mouseleave\" );\n"}],"desc":"Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.","longdesc":"\n      <p>The <code>.hover()</code> method binds handlers for both <code>mouseenter</code> and <code>mouseleave</code> events. You can use it to simply apply behavior to an element during the time the mouse is within the element.</p>\n      <p>Calling <code>$( selector ).hover( handlerIn, handlerOut )</code> is shorthand for:</p>\n      <pre><code>\n$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );\n      </code></pre>\n      <p>See the discussions for <code><a href=\"/mouseenter/\">.mouseenter()</a></code> and <code><a href=\"/mouseleave/\">.mouseleave()</a></code> for more details.</p>\n    "},{"return":"jQuery","signatures":{"added":"1.4","argument":{"desc":"A function to execute when the mouse pointer enters or leaves the element.","name":"handlerInOut(eventObject)","type":"Function"}},"examples":{"desc":"Slide the next sibling LI up or down on hover, and toggle a class.","code":"\n$( \"li\" )\n  .filter( \":odd\" )\n    .hide()\n  .end()\n  .filter( \":even\" )\n    .hover(function() {\n      $( this )\n        .toggleClass( \"active\" )\n        .next()\n          .stop( true, true )\n          .slideToggle();\n    });\n","css":"\n  ul {\n    margin-left: 20px;\n    color: blue;\n  }\n  li {\n    cursor: default;\n  }\n  li.active {\n    background: black;\n    color: white;\n  }\n  span {\n    color:red;\n  }\n","html":"\n<ul>\n  <li>Milk</li>\n  <li>White</li>\n  <li>Carrots</li>\n  <li>Orange</li>\n  <li>Broccoli</li>\n  <li>Green</li>\n</ul>\n"},"desc":"Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.","longdesc":"\n      <p>The <code>.hover()</code> method binds handlers for both <code>mouseenter</code> and <code>mouseleave</code> events. You can use it to simply apply behavior to an element during the time the mouse is within the element.</p>\n      <p>Calling <code>$( selector ).hover( handlerIn, handlerOut )</code> is shorthand for:</p>\n      <pre><code>\n$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );\n      </code></pre>\n      <p>See the discussions for <code><a href=\"/mouseenter/\">.mouseenter()</a></code> and <code><a href=\"/mouseleave/\">.mouseleave()</a></code> for more details.</p>\n    "}]}