Question

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

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

如果给出示例中的代码，我将如何进行此操作？没有jQuery / Javascript可以吗？

Answer 1

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

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

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

Answer 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/

CSS图库改版

2 个答案: