CSS圖片庫修改

Question

我創建了一個活動網站，顯然，它將包含一個活動日曆。我使用這個例子http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/爲畫廊，懸停效果等

但是，我想修改上面的例子，以便當您單擊縮略圖時，放大的圖像保持，直到您單擊另一個縮略圖等。

如何在給定代碼的情況下執行此操作？沒有jQuery/Javascript可能嗎？

Answer 1

您需要使用JavaScript來做到這一點。

該示例使用:hover來實現此效果。不幸的是需要頁面來「記住」某些東西。 CSS本身不能做到這一點。

您需要將:hover聲明中包含的樣式複製到類中，然後在鼠標懸停時將該類分配給該元素。這也意味着當另一個項目被徘徊時，你必須從這個項目中移除該類。

Answer 2

更改.thumbnail:hover span風格的CSS來像.thumbnail_clicked span並添加此jQuery代碼：

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

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