CSSイメージギャラリーの変更

Question

私は、明らかにイベントカレンダーを含むイベントウェブサイトを作成しています。私はこの例をhttp://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ギャラリー、ホバーエフェクトなどに使用しています。

ただし、サムネイルをクリックすると、別のサムネイルなどをクリックするまで、拡大画像はそのまま残ります。

この例のコードでは、どうすればいいですか？ jQuery/Javascriptなしでも可能ですか？

Answer 1

JavaScriptを使用する必要があります。

この例では、この効果を達成するために:hoverを使用しています。残念なことに、何かを覚えておくためのページが必要です。 CSSはそれだけではできません。

:hover宣言に含まれているスタイルをクラスにコピーし、そのクラスをマウスオーバー時にそのエレメントに割り当てる必要があります。これはまた、別のアイテムが拾われたときにこのクラスからそのクラスを削除する必要があることを意味します。

Answer 2

変更.thumbnail_clicked spanのようなものにCSSで.thumbnail:hover spanスタイルと、このjQueryのコードを追加します。

$(document).ready(function() { 
    $('.thumbnail').click(function() { 
     var cname = 'thumbnail_clicked'; 
     $(this).addClass(cname).siblings().removeClass(cname); 
    }); 
}); 

http://jsfiddle.net/mblase75/DxArs/