jQueryAnimation
Googleでログイン
問題5：hoverで説明を表示しよう！
デモのように画像をhoverすると画像の説明がでてくるようにしましょう！
あらかじめエディタに書くコード
<div class="box">
<div class="image">画像</div>
<div class="description">説明などを入れます</div>
</div>
¥HTML¥
.box{
position: relative;
width: 200px;
border: 2px solid black;
}
.image{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
.description{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #333333;
color: white;
opacity: .5;
text-align: center;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$(".description").hide();
$(".box").hover(function () {
$(".description").fadeToggle();
});
});
¥JavaScript¥
解説
まずdescriptionはhideで最初に消しておきます。そして.boxのhover時だけ適用しようと思うと、解答のようにfadeToggleで切り替えるという方法が考えられます。
ログインして解答を見る
完了にする！
活動記録をTweetする
