CSSで画像にマウスポインターを載せた時にツールチップを表示する プチ・テクニック

CSSで画像にマウスポインターを載せた時にツールチップを表示する プチ・テクニック
このエントリーをはてなブックマークに追加
PR

画像にマウスポインターを乗せると、詳細等を表示させるのに使えるツールチップの表示テクニックです。
画像以外でも応用できます!

まずはdemoを御覧ください

DEMO 表示

 

コード HTML

    <div>
        <img src="demo.jpg" alt="">
        <span>ツールチップを表示</span>
    </div>

 

コード CSS

div {
    position: relative;
    width: 500px;
    margin: 200px auto;
}

div span {
    display: none;
}

div img:hover + span {
    position: absolute;
    top:0px;
    left:310px;
    display: block;
    background: #eee;
    padding: 10px;
    border: 1px solid;
}

コードはこの様になっています

 

解説

最初にspanをdisplay:noneで非表示にしておきます

次に画像にマウスポインターを載せた時に、次の要素のspanに動作をつけるために+を使っています
これで画像をマウスポインターを載せた時にspanに変化を加えられます

あとはマウスポインターを載せた時のspanの表示をdisplay:blockで表示してpositionで表示位置を調整しています
好みに装飾すれば完了です!

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)