【jQuery】マウスホバーでキャプション表示

メモ的投稿

マウスホバーでキャプションを表示するのを、
jQueryで実装しました。

そしたらなかなか簡単にできたので、忘れないよう投稿してみる。

まずはHTML。

<div class="item">
    <div class="image"><a href="#"></a></div>
    <div class="cap">
        <a>title dao</a>
        <p>test dao. test dao.</p>
    </div>
</div>

次にCSS

.item{
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
}

.image{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #333;
}

.cap{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #efefef;
    display: none;
}

最後に肝心のJS

$(document).ready(function() {
     $('.item').hover(function() {
          $(this).find('div.cap').stop(false,true).fadeIn(200);
     },
     function() {
          $(this).find('div.cap').stop(false,true).fadeOut(200);
     });
});

とっても簡単にできました。
が、これにたどり着くまでには、
30分ほどの格闘が。
まだまだひよっこですね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です