リモートロールオーバーを CSS だけでやってみるのサンプル

CSS のコードは下記の通り。背景画像は、幅 120px 縦 160px のものを、カラーとモノクロを縦に並べて一つにしたものを使用。（つまり幅 120px 高さ 320px）

#rollover {
        margin-bottom: 12em;    /* これを指定しておかないと、それ以降の要素が重なってきてしまう。*/
}
#rollover ul {
        position:relative;
        margin: 0;
        padding: 0;
        height:160px;        /*背景画像と同じ高さ。指定しないとIE ではテキストが右によってしまう*/
}

/*リストをブロック化して横に並べる。*/

#rollover li {
        float: left;
        display: block;
        width: 120px;        /*背景画像と同じ幅*/
        height: 160px;       /*背景画像と同じ高さ*/
        margin: 0;
        padding: 0;
        list-style-type:none;
}

/*リスト内の a 要素に対して一括して指定*/

#rollover li a {
        display: block;
        width: 120px;        /*背景画像と同じ幅*/
        height: 160px;       /*背景画像と同じ高さ*/
        text-decoration:none;
        color: #666;
        background-position: 0 0;
        background-repeat: no-repeat;
}

/*リスト内の a 要素に対して背景画像を個別指定*/

#rollover li#food a {
        background-image: url(001.jpg);
}
#rollover #sneaker a {
        background-image: url(002.jpg);
}
#rollover #beer a {
        background-image: url(003.jpg);
}
#rollover #coffee a {
        background-image: url(004.jpg);
}
#rollover #cat a {
        background-image: url(005.jpg);
}

/*リスト内の a:hover に対して共通指定*/

#rollover li a:hover {
        background-position: 0 -160px;
}

/* em 内のテキストを下へ移動させる*/

#rollover li a em {
        position: absolute;
        top: 200px;
        left: 0;
        font-style: normal;
        diplay: block;      /* ブロック化しないと IE で崩れる。*/
        width: 16em;        /* 一応、文字幅に合わせているけど、やり方は考える余地あり。*/
}
#rollover li a:hover em {
        color: #2b0;
        text-decoration: underline;
        cursor: pointer;        /* IE のために、カーソルをポインタに指定*/
}

/* em 内テキストの縦のアキを広げる。これを指定しないとテキストが全て重なってしまう。*/

#rollover #sneaker a em {
        margin-top: 1.5em;
}
#rollover #beer a em {
        margin-top: 3em;
}
#rollover #coffee a em {
        margin-top: 4.5em;
}
#rollover #cat a em {
        margin-top: 6em;
}