問題

5
jQuery

hoverで説明を表示しよう!

jQueryの問題に挑戦しよう!

問題

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¥
                

期待する画面

解答と解説(hoverで説明を表示しよう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まずdescriptionはhideで最初に消しておきます。そして.boxのhover時だけ適用しようと思うと、解答のようにfadeToggleで切り替えるという方法が考えられます。

さらにスキルアップしたい方は公式LINEから「jQuery」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断