0

私は次のようなものを持っています

#categories{width:1042px;height:170px;margin:15px 0px 0px 0px;}
#categorieMenu{background:url(../images/categories.jpg) no-repeat;width:1042px;height:170px;margin:0;padding:0;}
#categorieMenu li,#categorieMenu a{height:170px;display:block;}
#categorieMenu li{float:left;list-style:none;display:inline;text-indent:-9999em;}
#categorie_1{width:174px;}
#categorie_2{width:175px;}
#categorie_3{width:174px;}
#categorie_4{width:175px;}
#categorie_5{width:174px;}
#categorie_6{width:170px;}
#categorie_1 a:hover{background:url(../images/categories.jpg) 0px -170px no-repeat;}
#categorie_2 a:hover{background:url(../images/categories.jpg) -174px -170px no-repeat;}
#categorie_3 a:hover{background:url(../images/categories.jpg) -349px -170px no-repeat;}
#categorie_4 a:hover{background:url(../images/categories.jpg) -523px -170px no-repeat;}
#categorie_5 a:hover{background:url(../images/categories.jpg) -698px -170px no-repeat;}
#categorie_6 a:hover{background:url(../images/categories.jpg) -872px -170px no-repeat;}

および画像のcategories.jpg

ここに画像の説明を入力

ホバーによって変化します。正常に動作しますが、レスポンシブにしたいのですが、各カテゴリに属性としてタイトルを付けるのが難しいかもしれないので、カテゴリの名前は画像のタイトルに依存しません

このメニューでこの属性を有効にするには、コードはどのようになりますか?

ここにjsfiddleがあります

画像のようなものを取得するにはどうすればよいですか: ここに画像の説明を入力

最後のカテゴリ「従業員認定」のみを追加しました

4

1 に答える 1

1

私はこれをフィドルチェックしました

http://jsfiddle.net/Shinov/p88LW/

#categorie_1 {
 width:16.6%;   
}

#categorie_2 {
 width:16.6%;
}
#categorie_3 {
 width:16.6%;
}
#categorie_4 {
 width:16.6%;
}
#categorie_5 {
  width:16.6%;
}
#categorie_6 {
 width:16.6%;
}
于 2013-07-09T05:59:40.393 に答える