jquery - 在css中设置图像可见区域

Question

我正在使用 jCarousel 制作 Logo 图像 slider 。因为图像不应该用作背景，它应该在图像标签中使用，这就是要求。所以将所有图像都放在 li 标签中。并且 jCarousel 工作正常。

但在这里我必须默认只显示一半图片( Sprite 图像 [默认，鼠标悬停图像])，鼠标悬停在另一部分上。在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);
    }
  );
});