Question

I’m having problem with the hover effect.

<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%;
   }

I’m using sliding door css with 3 images. problem is that when I set the background-position it looks like each picture starts from the same x y position… All pictures are in a sprite (original, hover , active under each other)

Is it possible to only set the Y value off all those 3 pictures in one “selector”?

Example:

http://jsfiddle.net/k4RjV/16/ somthing like this. If you hover on the button you can see that the x y cordinates are wrong for the left and right picture.

Answer 1

I’m not sure I fully understand what you want to do.

You can’t set different values for objects with the same selector, the most recent one will just replace the previous ones.

EDIT: Is this what you wanted to do?

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