2013年10月11日金曜日

jQuery でマウスカーソルのホバー時の処理を書く

HTML 要素にマウスカーソルが乗っている時のスタイルの変化は CSS の :hover で書きます。jQuery では hover() メソッドを使って、スタイルだけではなく独自の処理を行うことができます。

リファレンスはこちら
.hover() - jQuery API Documentation


こちらにサンプルを作成しました
http://okanoworld.appspot.com/sample/jquery/hover/index.html


ソースコードはこちらから落とせます

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery .hover() のサンプル</title>
  <link rel="stylesheet" href="hover.css"></link>
 </head>
 <body>
  <h1>下の四角形にマウスをのせてください</h1>
  <div id="message">マウスカーソルが乗っていません</div>
  <div id="area"></div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="hover.js"></script>
 </body>
</html>

hover.js
$('#area').hover(function() {
 $('#message').html('マウスカーソルがのりました');
 $(this).css('background-color', 'lightblue');
}, function() {
 $('#message').html('マウスカーソルがはなれました');
 $(this).css('background-color', 'pink');
});

hover.css
#area {
 width: 300px;
 height: 300px;
 background-color: pink;
}

#message {
 color: darkred;
 font-size: large;
}

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)