crossline

▼jQuery-その他マウスイベント-

font-size:12px;line-height: 150%;

 

 

 

 

■ mouseover( )メソッド

 

  • マウスをのせたとき
  • click( )メソッドによる画像への移動が実行されないように「return false; 」を記述します

 

f:id:ishuko:20140617012846p:plain

 

ブラウザ上での表示↓

 

f:id:ishuko:20140617012912p:plain

MouseOver↓

f:id:ishuko:20140617012933p:plain

 

 

 

 

■mouseout( )メソッド

  • マウスが外れたとき
  • mouseover( )と組み合わせて、マウスが外れたときの処理(元の画像に戻す)を追加する

 

f:id:ishuko:20140617013858p:plain

 

 

■mouseenter( )/mouseleave( )メソッド

 

  • もう一つのマウスをのせたとき/外れたとき

 

f:id:ishuko:20140617014110p:plain

 

 

 

 

※違い

 

-mouseover( )/mouseout( )

  子孫要素にマウスをのせたとき/外れたときにも発生する

 

-mouseenter( )/mouseleave( )

  指定した要素のみを対象とする

 

 

hoverメソッドを使えば、mouseenter( )/mouseleave( )を同時に使える

hover(マウスが乗ったときのイベントハンドラ,

マウスが外れたときのイベントハンドラ)

 

 

f:id:ishuko:20140617020022p:plain

 

 

 

■toggle( )メソッド

$(function(){

$(セレクター).toggle(function(){

最初に実行されたときに処置する

},function(){

2回目にクリックされたときに実行する

}, function(){

},function(){

 

 

 

f:id:ishuko:20140617022257p:plain

最後にクリックされたとき実行する処理