带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。问题是当我设置背景位置时，它看起来每张图片都从相同的 x y 位置开始......所有图片都在一个精灵中（原始，悬停，彼此处于活动状态）

是否可以在一个“选择器”中只设置所有这 3 张图片的 Y 值？

例子：

http://jsfiddle.net/k4RjV/16/ 类似这样的东西。如果您将鼠标悬停在按钮上，您可以看到左右图片的 x y 坐标是错误的。

Answer 1

我不确定我是否完全理解您想要做什么。

您不能为具有相同选择器的对象设置不同的值，最新的只会替换之前的。

编辑：这是你想做的吗？

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

Answer 2

您需要为每个div单独设置新的背景位置，因为每个div都有不同的水平位置，无法单独设置垂直位置：

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

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

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

注意：非整数 px 值有什么特殊原因吗？这在技术上没有错，但通常没有意义。