[jQuery] 基本メモ: マウスイベント

<div id="box" style="width:100px; height:100px; background:yellow;"></div>

クリック

$('#box').click(function() {
    alert('clicked');
});

マウスオーバー

$('#box').mouseover(function() {
    $(this).css('background','red');
});

マウスアウト

$('#box').mouseout(function() {
    $(this).css('background','yellow');
});

マウス移動

$('#box').mousemove(function(e) {
    $(this).text(e.pageX);
});

メソッドチェインでも書ける

$('#box').mouseover(function() {
    $(this).css('background','red');
}).$('#box').mouseout(function() {
    $(this).css('background','yellow');
}).$('#box').mousemove(function(e) {
   $(this).text(e.pageX);
});