CSSで一枚の画像のみを使用しロールオーバーをしてみたのですが、Google Chromeではなんとか再現できたものの、IE9で確認してみたところ、画像が全て同じ物（左上の画像）になっていました(マウスを乗せても変化なし) 初心者なので初歩的な部分でつまずいている可能性もあると思いますが、どうかよろしくお願いいたします 以下HTMLとCSSです #globalnavi,#globalnavi li{ display:block;list-style:none; margin: 0;padding: 0; width: 96px; } #globalnavi li{ width: 96px;height: 79px; display:inline-block; position:relative; } #globalnavi a { display: block; text-indent: -9999px; text-decoration: none; width:100%;height:100%; background: url(./img/1.png) no-repeat 0 0 ; text-decoration: none; } #globalnavi a[href="./info.html"] { background-position: 0px 0px; } #globalnavi a[href="./main.html"] { background-position: 0px -79px; } #globalnavi a[href="./blog.html"] { background-position: 0px -158px; } #globalnavi a[href="./link.html"] { background-position: 0px -237px; } #globalnavi a[href="./index.html"] { background-position: 0px -316px; } #globalnavi a[href="./info.html"]:hover, #globalnavi a[href="./info.html"]:focus { background-position: -96px -0px; } #globalnavi a[href="./main.html"]:hover, #globalnavi a[href="./main.html"]:focus { background-position: -96px -79px; } #globalnavi a[href="./blog.html"]:hover, #globalnavi a[href="./blog.html"]:focus { background-position: -96px -158px; } #globalnavi a[href="./link.html"]:hover, #globalnavi a[href="./link.html"]:focus { background-position: -96px -237px; } #globalnavi a[href="../index.html"]:hover, #globalnavi a[href="./index.html"]:focus { background-position: -96px -316px; }
↧