3枚の画像を含むCSSスライドドア、ホバー効果の問題

Question

ホバー効果に問題があります。

<li class"menuButton facorits> 
<div class="menuButtonLeft></div> 
<div class="menuButtonMiddle> 
    <div class="favotisIcon"></div> 
</div> 
<div class="menuButtonRight"></div> 
</li> 


.menuButton:hover > div { 
    background-position: right -40px; 
    cursor: pointer; 
    } 

    .menuButtonLeft{ 
     background: url("left.png") no-repeat scroll 0px 0px transparent; 
     float: left; 
     width: 5px; 
     height: 100%; 
    } 

    .menuButtonMiddle{ 
     background: url("Middle.png") no-repeat scroll -5px 0px transparent; 
     float: left; 
    } 

    .menuButtonRight{ 
     background: url("right.png") no-repeat scroll -224px 0 transparent; 
     float: left; 
     width: 5px; 
     height: 100%; 
    } 

私は3枚の画像でスライドドアcssを使用しています。問題は、背景位置を設定すると、各画像が同じxy位置から始まるように見えるということです。すべての画像がスプライトにあります（オリジナル、ホバー、互いの下にアクティブ）

1つの「セレクタ」で3枚の画像すべてからY値を取り除いていますか？

例：このような

http://jsfiddle.net/k4RjV/16/気にいりません。ボタンの上にマウスを置くと、x y座標が左右の画像に間違っていることがわかります。

Answer 1

私はあなたがしたいことを十分に理解していません。

同じセレクタを使用してオブジェクトに異なる値を設定することはできません。最も新しいものは以前のものに置き換えられます。

編集：これはあなたのやりたいことですか？

あなたがそれぞれ異なる水平方向の位置を持っており、それだけでは垂直方向の位置を設定することはできませんので、別途各 divのために新しい背景位置を設定する必要が

li div { 
    background-position-y: 10px; 
} 

Answer 2

：

.menuButton:hover .menuButtonLeft { 
    background-position: 0px -29px; 
} 

.menuButton:hover .menuButtonMiddle { 
    background-position: -5px -29px; 
} 

.menuButton:hover .menuButtonRight { 
    background-position: -130.8px -29px; 
} 

NB：任意の特別な理由を非整数の場合px値？それは技術的に間違っているわけではありませんが、通常意味がありません。