A Little Each Day

note to self

jQueryでhoverイベントを使ってみる

こんにちは。本日はjQueryを使って簡単なhoverイベントをつくりたいと思います。

hoverイベントはある要素にマウスをかざした時に、テキスト(文字)などが現れるテクニックです。

よくwebページなどでリンクや文字列をかざした時にユーザーに知らせるために現れますよね。

バージョン

HTML5
CSS3
jQuery2.1.4


下準備

まずはじめに今回使う各ファイルを作ったりしていきましょう。

htmlファイル

htmlファイルでは

・cssファイルの読み込み
・jQuery本体の読み込み
・jsファイルの読み込み

を書いて読み込みましょう。

jsファイルはbody閉じタグ前に書きます。
こうすることでjsファイルを高速で読み込むことができます。

これはjQueryの基礎基本ですね。

<!-- sample.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sample</title>
  <!-- cssファイルを読み込む -->
  <link rel="stylesheet" href="sample.css">
  <!-- jQueryを読み込む -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
   <!-- ここからコンテンツ -->
  <div id="wrapper">
    <div class="box">ボックス</div>
    <p class="text">上のボックスにマウスをかざすと文字があらわれるよ。</p>
  </div>
   <!-- jsファイルを読み込む -->
  <script src="sample.js"></script>
</body>
</html>

cssファイル

次にcssを作っていきましょう。

.box{
  height: 50px;
  background-color: skyblue;
}


この段階でこのようになってます。

f:id:chi_kun:20160525134952p:plain


ここまでで基本的なレイアウトができました。


jsファイル

最後にjsファイルを作りましょう。

今回は上記のhtmlファイルにも書いたように、sample.jsというファイルを作成しましょう。中身はまだ空で大丈夫です。

つぎにテキスト部分をデフォルトで隠したり、ボックス部分にマウスをかざしたときテキストが表示されるようにしましょう。


テキスト部分をデフォルトで隠す

マウスをボックス部分にかざすとテキストが現れるようにしたいので、デフォルトではテキスト部分を隠しましょう。

/* テキスト部分に追加 */
.text{
  display: none;
}


するとテキスト部分が隠れましたね。

f:id:chi_kun:20160525141014p:plain


実際にhoverイベントを作る

それでは実際にjQueryを使ってhover機能を実装して行きましょう。

今回のhoverイベントはfadeInメソッドを使っていきましょう。

/* sample.js */
$(function(){
  $('#wrapper').hover(
    function(){
    $(this).find('.text').fadeIn();
  },
    function(){
    $(this).find('.text').fadeOut();
  }
  );
});


すると、きちんとボックス部分にマウスをかざすとデフォルトで隠れていたtext部分が表示されてますね。

f:id:chi_kun:20160525143955p:plain


今回はhoverイベントの基本的な部分を見てきました。

webページを作っているとよくhoverイベントを使うので覚えておいて損はないですよ。



本日は以上です。