hoverイベントを使っていろいろしてみよう

hoverイベントの書き方

$("セレクタ").hover(function(){
  ~hoverされた時に実行させたい処理~
},function({
  ~hoverが外れた時に実行させたい処理~
}));

hoverでcssを切り替える

マウスを乗せるとすると背景のcssが切り替わります。

hover!

hoverでcss複数を切り替える

マウスを乗せるとするといろいろcssが切り替わります。

hover!

使っているメソッド

.css(); => 指定した要にstyleでcssを追加することができます。

html部分 
    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

    <body>
      <div class="sample">
        <div class="hover-btn" id="hover">hover!</div>
      </div>

      <div class="sample">
        <div class="hover-btn" id="hover2">hover!</div>
      </div>
    </body>
    </html>
jQuery部分 
    $(function(){
      $("#hover").hover(function(){
        $(this).css("backgroundColor","#13B453");
      },function(){
        $(this).css("backgroundColor","#1354B4");
      });

      $("#hover2").hover(function(){
        $(this).css({"backgroundColor":"#13B453","color":"green","padding":"10px 35px"});
      },function(){
        $(this).css({"backgroundColor":"#1354B4","color":"#fff","padding":"5px 25px"});
      });
    });

$(this)ってなんだ？

$(this)を使うと指定しているセレクタ自身を表すことができます。
上記の場合だと、$(this)は「ホバーされたid=hover」を表しています。

hoverで画像を切り替える

マウスを乗せるとすると画像が切り替わります。(sample.png→sample_on.png)

使っているメソッド

.attr("属性"); => 指定した要素の属性を取得できます。(src,href,class,id,targetなどなど)
.attr("属性","変更後の属性値"); => 指定した要素の属性値を変更することができます。
.replace("置換前","置換後"); => 文字列を置換することができます。

html部分 
    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

    <body>
      <div class="sample">
        <div id="hover3"><img src="./images/hover/sample.png"></div>
      </div>
    </body>
    </html>
jQuery部分 
    $(function(){
      $("#hover3 img").hover(function(){
        var src = $(this).attr("src");
        var rep = src.replace(".png","_on.png");
        $(this).attr("src",rep);
      },function(){
        var src = $(this).attr("src");
        var rep = src.replace("_on.png",".png");
        $(this).attr("src",rep);
      });
    });

varってなんだ？

var 好きな変数名 = "値";
varというのは、変数と呼ばれていて値を代入しておくことができる便利ボックスです。
何回も使う値を変数に入れておくと、スッキリとしたコードを書くことができ、何回も書く手間も省けます。