)ver1.4.3〜機能jQueryオブジェクトで指定した要素内にマウスカーソルが入った時に引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定(バインド)したfunctionを実行します。ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。指定した要素内に子孫要素がある場合、子孫要素内にマウスカーソルが入った際にもfunctionが実行されることに注意してください。mouseenterメソッドを利用してください。※以降「マウスカーソルが要素内(子孫要素を含む)に入った」動作のことをマウスオーバーと呼びます。解説マウスオーバーで実行する処理を設定サンプル(mouseover/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、mouseoverメソッドの引数にfunctionの「overFunc」が設定されています。{$("button").mouseover(overFunc);});mouseoverメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。マウスオーバーしたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。任意の名前(イベントオブジェクト){マウスオーバーで実行したい処理}サンプルmouseover/01.htmlで利用したoverFuncは以下の様になっており、アラートで「mouseover」と表示するだけです。このサンプルでは引数(イベントオブジェクト)は利用していません。overFunc(eo){alert("mouseover");}結果として、div要素にマウスオーバーするとアラートで「mouseover」と表示されます。イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(mouseover/01b.html)$("button").mouseover(function(){alert("mouseover");})他の要素に設定されたマウスオーバー時の処理を実行するmouseoverメソッドは引数を設定しないと、要素に設定されたマウスオーバー時の処理を実行します。サンプル(mouseover/02.html)を開いてbody内にbutton要素とdiv要素があることを確認してください。続いてjQueryを確認してください。div要素に設定されたマウスオーバー時の処理はmouseover/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとdiv要素に設定されたマウスオーバー時の処理が実行されます。$("button").click(function(){$("div").mouseover();})結果として、buttonを「クリック」するとdiv要素を「マウスオーバー」したのと同じようにアラートで「mouseover」と表示されます。objectオブジェクトをfunctionに渡す第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。dataプロパティを介して渡されます。サンプル(mouseover/03.html)を開いてbody内の構成はmouseover/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、mouseoverメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。$("div").mouseover({test:10},function(eo){alert(eo.data.test);})結果として、div要素にマウスオーバーすると第1引数で渡されたtestプロパティの値「10」がアラートで表示されます。子孫要素にも反応しますmouseoverメソッドは子孫要素にマウスオーバーしたときもイベントを受け取ります。サンプル(mouseover/04.html)を開いてbody内にdiv要素が入れ子になって配置(外側はoutのid属性、内側はinのid属性)されていることを確認してください。id="in"></div></div>jQueryは以下の様に記述され、mouseover/01b.htmlとはセレクタが違うだけです。$("#out").mouseover(function(){alert("mouseover")});セレクタに「#out」を設定しているので、外側のdiv要素(outのid属性)にマウスオーバーした際「mouseover」と表示されるのは良いのですが、セレクタで指定されていない内側のdiv要素(inのid属性)にマウスオーバーした際も「mouseover」と表示されます。mouseoutメソッドを利用します。メモmouseenterメソッドとの比較mouseenterイベントはバブリングしないため子要素で発生したイベントは親要素に伝わりません。mouseenterメソッドを利用します。サンプル(mouseenter/test04.html)を開いて以下の様にmouseoverメソッドがmouseenterメソッドに変更されているのを確認してください。$("#out").mouseenter(function(){alert("mouseenter")});この様にmouseenterメソッドを利用すれば、子孫要素(内側の黄色いdiv要素)にマウスオーバーしてもアラートが出ません。こちらのメソッドのほうが利用しやすいと思います。