CSSでリモートロールオーバー

リモートロールオーバーをJavaScriptじゃなくてCSSで。
（こういうのをそう呼ぶって今日ググってて初めて知った）

小さいサムネール画像の上にポインタをのせると左側のでっかい表示部分にそのサムネールの拡大画像が表示されるっていうやつ。

ちょっと変則っていうか反則っていうかトリッキーっていうか、あんまり威張って使えないような内容の気もするけど必要だったので。（あとでもうちょっとスマートに出来ないか考えてみよう）

このソースを元にツールチップの表示なんかにも使えそう。

CSS

dl{
    position: relative;
    /* マウスオーバーで出現する画像の位置を指定するときに基点となる */
}

a span{
    display: none;
    /* マウスオーバーで出現する部分で通常は隠れている */
}

a:hover{
    display:block;
}

a img{
    /* サムネール画像のサイズ */
    width: 80px;
    height: 60px;
}

a:hover span{
    /* マウスオーバーで出現する画像の場所を指定 */
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

a:hover span img{
    /* マウスオーバーで出現する画像のサイズ */
    width: 300px;
    height: 225px;
}

(x)html

<dl>
<dt><img src="./img/sampleBread1.jpg" width="300" height="225" alt="" /></dt>
<dd>

<div>
<a href="#"><img src="./img//sampleBread2.jpg" alt="" />
<span><img src="./img//sampleBread2.jpg" alt="" /></span></a>
</div>

<div>
<a href="#"><img src="./img//sampleBread6.jpg" alt="" />
<span><img src="./img//sampleBread6.jpg" alt="" /></span></a>
</div>

</dd>
</dl>

実行サンプル

Tags: tips