)ver1.4〜※子孫要素には反応しません。引数に2つのfunctionをとりマウスカーソルが要素内に入ったり出たときの時の処理を設定します。最初に設定するfunctionはマウスカーソルが要素内に入ったときに実行され、2番目に設定するfunctionはマウスカーソルが要素内から出たときに実行されます。hoverメソッドはmouseenterイベントとmouseleaveイベントを利用しているため、子孫要素には反応しません。mouseleaveメソッドver1.4からは引数に1つだけfunctionを設定できるようになりました。この構文の場合、マウスカーソルが要素内に入ったときも、出たときも同じfunctionが実行されます。解説2つのfunctionを設定サンプル(hover/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、hoverメソッドの引数に「inFunc」と「outFunc」が設定されています。outFunc);});hoverメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。cssメソッドを利用して、div要素の背景色をオレンジに変更しています。inFunc(){$("div").css("background-color","#f90");}outFunc(マウスカーソルが要素内から出たときに実行)では同じようにcssメソッドを利用して背景色を青に変更しています。outFunc(){$("div").css("background-color","#09c");}結果として、div要素内にマウスカーソルが入ると背景色がオレンジにになり、出ると背景色が青に戻ります。イベントのfunction設定は、無名関数を利用することが多いです。(){$("div").css("background-color","#09c");});上記のように無名関数を利用する場合は2つのfunctionを仕切るカンマ(4行目)を忘れないように気を付けましょう。1つだけfunctionを設定v1.4からfunctionが1つだけでも機能するようになりました。この場合、マウスカーソルが入ったときも出たときも同じfunctionが実行されます。サンプル(hover/02.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、最初に変数cntに0を設定し、hoverメソッドの引数として「hoverFunc」を1つだけ設定しています。textメソッドを利用してdiv要素内に表示します。hoverFunc(){cnt++;$("div").text(cnt);}結果として、div要素にマウスカーソルが入ったり出たりするたびにdiv要素内の数字がカウントアップしていきます。マウスカーソルが入ったときも出たときも同じ処理をしたいときに利用すると便利な構文です。mouseenterメソッド)。hoverメソッドの場合はmouseenterイベントとmouseleaveイベントを利用しているため子孫要素には反応しません。サンプル(hover/03.html)を開いてbody内にdiv要素が入れ子になって配置(外側はoutのid属性、内側はinのid属性)されていることを確認してください。id="in"></div></div>jQueryは以下の様に記述され、inFuncが実行されたらアラートで「in」と表示し、outFuncが実行されたらアラートで「out」と表示するようにしました。outFunc);});結果として、外側のdiv要素(outのid属性)に入ったり出たりしたときだけアラートが表示され、内側のdiv要素(inのid属性)には反応しません。メモ動的な要素には対応していませんhoverメソッドは動的な要素に利用できません。サンプル(hover/test01.html)を開いてbody内に何も無いことを確認してください。appendメソッドを利用して動的にdiv要素を追加しています。outFunc);$("body").append("<div>");});結果としてサンプルhover/01.htmlと異なり、div要素にマウスオーバーしても反応せず、動的な要素に対応していないことが確認できます。ちなみに要素を追加してからhoverメソッドを利用すれば機能させることはできます。appendメソッドをhoverメソッドよりも前に設定しただけですが、サンプルhover/01.htmlと同じように機能します。