1 line
3.9 KiB
JSON
1 line
3.9 KiB
JSON
{"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 "}]} |