在css中设置图像可见区域

Question

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

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

请参阅屏幕截图。

谢谢

Answer 1

首先，确保您的 li 元素设置为溢出：隐藏。
然后，将您的 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);
    }
  );
});