0

いくつかのリンクがあり、それぞれに正しいスプライトを渡して各画像と各リンクの相対的なホバー画像を表示するクラスがあります。

問題は、スプライトの真下にテキストを配置することです。

誰でも解決策を見つけるのを手伝ってもらえますか?

私の問題固有のコード:

.image_row td a{
    background-image:url('http://www.thechefsdirectory.com/images/navigation/VIEW_WEB.png');
    background-repeat:no-repeat;
    display: block;
    height: 70px;
    width: 70px;
}

.image_row td a.item1 {background-position:0px 0px;}
.image_row td a:hover.item1 {background-position:0px -70px;}

.image_row td a.item2 {background-position:-70px 0px;}
.image_row td a:hover.item2 {background-position:-70px -70px;}

.image_row td a.item3 {background-position:-140px 0px;}
.image_row td a:hover.item3 {background-position:-140px -70px;}

.image_row td a.item4 {background-position:-210px 0px;}
.image_row td a:hover.item4 {background-position:-210px -70px;}

.image_row td a.item5 {background-position:-280px 0px;}
.image_row td a:hover.item5 {background-position:-280px -70px;}

.image_row td a.item6 {background-position:-350px 0px;}
.image_row td a:hover.item6 {background-position:-350px -70px;}

.image_row td a.item7 {background-position:-420px 0px;}
.image_row td a:hover.item7 {background-position:-420px -70px;}

.image_row td a.item8 {background-position:-490px 0px;}
.image_row td a:hover.item8 {background-position:-490px -70px;}

関連する JSFIDDLE はHEREにあります。

4

1 に答える 1

2

I know that this one will look weird, but...

.image_row td a{
    background-image:url('http://www.thechefsdirectory.com/images/navigation/VIEW_WEB.png');
    background-repeat:no-repeat;
    display: block;
    height: 0px;
    padding: 70px 0 0 0;
    text-align:center;
    width: 70px;
}

zero height and 70px padding-top

DEMO: http://jsfiddle.net/pavloschris/53uLN/1/

于 2013-03-31T01:34:27.843 に答える