在css中设置图像可见区域

Question

我正在使用jCarousel制作徽标的图像滑块。因为图像不应该用作背景，它应该在图像标签中，这就是要求。所以用li标签放置所有图像。和jCarousel工作正常。

但是在这里我必须默认显示图片的一半（精灵图像[默认，鼠标悬停在图像上]），鼠标悬停在另一部分上。在css中如何设置图像位置只显示图片的一半，鼠标显示另一半。

请参阅屏幕截图。

由于

Answer 1

首先，确保你的li元素设置为overflow：hidden 然后，将你的img移动到li元素之外的左边：

var neg_width_of_individual_img = -35; //may need to change this number!

$(document).ready(function(){
  $('#slideshow img').hover(
    function(){
      $(this).css('margin-left',neg_width_of_individual_img);
    },
    function () {
      $(this).css('margin-left',0);
    }
  );
});