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/