control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/mouseover.json

{"name":"mouseover","type":"method","title":".mouseover()","deprecated":null,"removed":null,"desc":"Bind an event handler to the \"mouseover\" JavaScript event, or trigger that event on an element.","categories":["events/mouse-events","version/1.0","version/1.4.3"],"entries":[{"return":"jQuery","signatures":[{"added":"1.0","argument":{"desc":"A function to execute each time the event is triggered.","name":"handler(eventObject)","type":"Function"}},{"added":"1.4.3","argument":[{"desc":"An object containing data that will be passed to the event handler.","name":"eventData","type":"PlainObject","optional":"true"},{"desc":"A function to execute each time the event is triggered.","name":"handler(eventObject)","type":"Function"}]},{"added":"1.0"}],"examples":{"desc":"Show the number of times mouseover and mouseenter events are triggered.\n<code>mouseover</code> fires when the pointer moves into the child element as well, while <code>mouseenter</code> fires only when the pointer moves into the bound element.","css":"\n  div.out {\n    width: 40%;\n    height: 120px;\n    margin: 0 15px;\n    background-color: #d6edfc;\n    float: left;\n  }\n  div.in {\n    width: 60%;\n    height: 60%;\n    background-color: #fc0;\n    margin: 10px auto;\n  }\n  p {\n    line-height: 1em;\n    margin: 0;\n    padding: 0;\n  }\n","code":"\nvar i = 0;\n$( \"div.overout\" )\n  .mouseover(function() {\n    i += 1;\n    $( this ).find( \"span\" ).text( \"mouse over x \" + i );\n  })\n  .mouseout(function() {\n    $( this ).find( \"span\" ).text( \"mouse out \" );\n  });\n\nvar n = 0;\n$( \"div.enterleave\" )\n  .mouseenter(function() {\n    n += 1;\n    $( this ).find( \"span\" ).text( \"mouse enter x \" + n );\n  })\n  .mouseleave(function() {\n    $( this ).find( \"span\" ).text( \"mouse leave\" );\n  });\n","html":"\n<div class=\"out overout\">\n  <span>move your mouse</span>\n  <div class=\"in\">\n  </div>\n</div>\n\n<div class=\"out enterleave\">\n  <span>move your mouse</span>\n  <div class=\"in\">\n  </div>\n</div>\n"},"longdesc":"\n    <p>This method is a shortcut for <code>.on( \"mouseover\", handler )</code> in the first two variations, and <code>.trigger( \"mouseover\" )</code> in the third.</p>\n    <p>The <code>mouseover</code> event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>\n    <p>For example, consider the HTML:</p>\n    <pre><code>\n&lt;div id=\"outer\"&gt;\n  Outer\n  &lt;div id=\"inner\"&gt;\n    Inner\n  &lt;/div&gt;\n&lt;/div&gt;\n&lt;div id=\"other\"&gt;\n  Trigger the handler\n&lt;/div&gt;\n&lt;div id=\"log\"&gt;&lt;/div&gt;\n    </code></pre>\n    <p class=\"image\">\n      <img src=\"/resources/0042_05_06.png\" alt=\"\"/>\n    </p>\n    <p>The event handler can be bound to any element:</p>\n    <pre><code>\n$( \"#outer\" ).mouseover(function() {\n  $( \"#log\" ).append( \"&lt;div&gt;Handler for .mouseover() called.&lt;/div&gt;\" );\n});\n    </code></pre>\n    <p>Now when the mouse pointer moves over the <samp>Outer</samp> <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id=\"log\"&gt;</code>. We can also trigger the event when another element is clicked:</p>\n    <pre><code>\n$( \"#other\" ).click(function() {\n  $( \"#outer\" ).mouseover();\n});\n    </code></pre>\n    <p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>\n    <p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the <samp>Inner</samp> element in this example, a <code>mouseover</code> event will be sent to that, then trickle up to <samp>Outer</samp>. This can trigger our bound <code>mouseover</code> handler at inopportune times. See the discussion for <code>.mouseenter()</code> for a useful alternative.</p>\n  "}]}