<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ボタンにホバーの機能を付けてみる</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/ui/jquery-ui.js"></script>
<!--
jquery-ui.jsを読み込まないと
animate()の箇所でbackgroundプロパティ
背景色の切り替える処理が動作しない。
-->
<style>
/* ここから
全称セレクタで空間をリセット
フォントの設定を実施
*/
*{margin:0;padding:0;}
body{background-color:#30bb76;}
h1,h2,h3,
button{font-family:"メイリオ";}
h1{text-align:center;}
/* ここまで
全称セレクタで空間をリセット
フォントの設定を実施
*/
#container{
width:750px;
margin:0 auto;}
#allButtons button{
float:left;
width:200px;
height:80px;
margin:0 10px 20px;
font-size:18px;
letter-spacing:0.5em;
background-color:#ffffff;
color:#ebc000;
border-radius:16px;
border:none;
display:block;}
#allButtons button{
border:0px solid #b06289;
}
button{position:relative;}
button .rightButton{
position:absolute;
top:0;
left:0;
width:0;
height:100%;
overflow:hidden;
}
button span span{
display:block;
width:200px;
height:80px;
line-height:80px;
color:#f0f0f0;
background-color:#987789;
border-radius:16px;
}
</style>
</head>
<body>
<div id="container">
<h1>色々なボタン</h1>
<div id="allButtons">
<button>東京都</button>
<button>神奈川県</button>
<button>埼玉県<span class="rightButton">
<span>埼玉県</span></span></button>
<button>群馬県</button>
<button>茨城県</button>
<button>千葉県<span class="rightButton">
<span>千葉県</span></span></button>
<button>長野県</button>
<button>愛知県</button>
<button>静岡県<span class="rightButton">
<span>静岡県</span></span>
</button>
</div>
</div>
<script>
$(function(){
var DURATION = 500;
/*
#allButtons button:nth-child(3n+1)と指定すると
「#allButtons」で囲まれている要素、今回は
「３の倍数」+ 1 番目の「button」要素を指定する。
*/
//一番左の列のボタン
$("#allButtons button:nth-child(3n+1)")
.on("mouseover",function(){
$(this)
/*
stop(true)を入れるのは、実行中のアニメーションを
途中でキャンセルするためです。これを書かないと、
アニメーション途中でボタンの外へマウスを持っていた
場合アニメーションが終わらないと、
mouseoutで指定した
アニメーションが実行されない。
stop()
引数：true | false
指定しないと「false」が設定される
true: アニメーションをキャンセルする
false:アニメーションをキャンセルしない
*/
.stop(true)
.animate({
backgroundColor: "#ae6d44",
color: "#ffffff"
},DURATION);
})
.on("mouseout",function(){
$(this).stop(true).animate({
backgroundColor:"#ffffff",
color:"#ebc000"
},DURATION);
});
//中央列のボタン
$("#allButtons button:nth-child(3n+2)")
.on("mouseover",function(){
$(this).stop(true).animate({
borderWidth: "14px",
color: "#b06289"
},DURATION,"easeOutSine");
})
.on("mouseout",function(){
$(this).stop(true).animate({
borderWidth: "0px",
color: "#ebc000"
},DURATION,"easeOutSine");
});
//一番右の列のボタン
$("#allButtons button:nth-child(3n+3)")
.on("mouseover",function(){
$(this).find("> span").stop(true).animate({
width:"100%"
},DURATION,"easeOutQuad");
})
.on("mouseout",function(){
$(this).find("> span").stop(true).animate({
width:"0%"
},DURATION,"easeOutQuad");
});
});
</script>
</body>
</html>
