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

Tweet

238

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

まずは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で表示位置を調整しています
好みに装飾すれば完了です！

Tweet

短縮URL:

2013年12月02日 WEB制作系 CSSツールチップ