CSS 图片库修改答案

【问题标题】：CSS Image Gallery modificationCSS 图片库修改
【发布时间】：2012-01-10 03:16:58
【问题描述】：

我正在创建一个活动网站，其中显然包含活动日历。我将这个例子 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ 用于图库、悬停效果等。

但是，我想修改上面的示例，以便当您单击缩略图时，放大的图像会一直保留到您单击另一个缩略图等为止。

鉴于示例中的代码，我将如何执行此操作？没有 jQuery/Javascript 可以吗？

【问题讨论】：

标签： jquery css image xhtml gallery

【解决方案1】：

您需要使用 JavaScript 来执行此操作。

示例使用:hover来实现这个效果。不幸的是需要页面来“记住”一些东西。 CSS 本身无法做到这一点。

您需要将:hover 声明中包含的样式复制到一个类，然后将该类分配给鼠标悬停时的元素。这也意味着当另一个项目悬停时，您必须从该项目中删除该类。

【讨论】：

嗯..有道理！谢谢回复！不过，我必须先更新自己的 Javascript。哈哈。 :)

【解决方案2】：

将 CSS 中的 .thumbnail:hover span 样式更改为 .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/

【讨论】：

你太棒了！非常感谢！
不客气——别忘了接受你最喜欢的答案。