楽天RMSだと、ロールオーバー用のjavascriptって使えないじゃないですか。
しょうがないから、cssで背景化して、background-positionで
1枚の画像の位置を変える という、よくあるやり方をやろうとしたら、
IEでうまくいかない。
IE6,7,8,9で全部でうまくいかない。
調べてみたら、
background-positionはhover前もhoverあとも、絶対値で指定しないとだめなんだって。
楽天の場合。
よくやるやり方はこうだと思う↓
menu1.gifという1枚の画像をマウスを乗せることによって、bottomを見せるというやり方。
ところが、楽天だとこれがエラーになる。
(なんでなのかはわからない)
なので、下のようにやる
一応書いたやつを全部のせておきます。
しょうがないから、cssで背景化して、background-positionで
1枚の画像の位置を変える という、よくあるやり方をやろうとしたら、
IEでうまくいかない。
IE6,7,8,9で全部でうまくいかない。
調べてみたら、
background-positionはhover前もhoverあとも、絶対値で指定しないとだめなんだって。
楽天の場合。
よくやるやり方はこうだと思う↓
.menu1 a{background:url(img/menu1.gif) no-repeat left top;}
.menu1 a:hover{background:url(img/menu1.gif) no-repeat left bottom;}
menu1.gifという1枚の画像をマウスを乗せることによって、bottomを見せるというやり方。
ところが、楽天だとこれがエラーになる。
(なんでなのかはわからない)
なので、下のようにやる
.menu1 a{background:url(img/menu1.gif) no-repeat 0px 0px;}
.menu1 a:hover{background:url(img/menu1.gif) no-repeat 0px -20px;}
一応書いたやつを全部のせておきます。
#globalmenu li{float:left;}#globalmenu li a{text-indent:-9999em;overflow:hidden;font-size:10px;display:block;height:59px;}#globalmenu li.menu1 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu1.png) no-repeat ;width:60px;}#globalmenu li.menu2 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu2.png) no-repeat ;width:59px;}#globalmenu li.menu3 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu3.png) no-repeat ;width:75px;}#globalmenu li.menu4 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu4.png) no-repeat ;width:129px;}#globalmenu li.menu5 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu5.png) no-repeat;width:115px;}#globalmenu li.menu6 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu6.png) no-repeat;width:118px;}#globalmenu li a{background-position:0px 0px !important;}#globalmenu li a:hover{background-position:0px -74px !important;}