画像をCSSで表示する

Question

jCarouselを使用してロゴの画像スライダーを作成しています。画像を背景として使用してはならないという点で、画像タグ内に置く必要があります。だから、liタグですべての画像を置いた。 jCarouselはうまく動作しています。

しかし、ここでは、デフォルトでは画像の半分（スプライト画像[デフォルト、マウスオーバー画像]）を表示し、別の部分にはマウスで表示する必要があります。 cssでは画像の半分だけを表示するように画像位置を設定し、もう半分はマウスに表示する方法を説明します。

スクリーンショットを参照してください。

おかげ

Answer 1

まず、あなたのli要素がオーバーフローに設定されていることを確認してください：隠されました。
その後、LI要素の外、左にあなたのimgのを移動：

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