問題
5
jQueryAnimation
hoverで説明を表示しよう！
jQueryAnimationの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
まずdescriptionはhideで最初に消しておきます。そして.boxのhover時だけ適用しようと思うと、解答のようにfadeToggleで切り替えるという方法が考えられます。
