css - 无法使活动选择器工作

Question

我使用以下代码设置了画廊类型页面：

http://jsfiddle.net/g2hY4/

我想在缩略图处于活动状态时将小缩略图图像不透明度更改为 1（就像将鼠标悬停在缩略图上时的情况一样）。我试过添加一些这样的CSS......

 #One:active {
     opacity: 1;
 }

但这行不通。

任何帮助都会很棒！

Answer 1

我认为css 中的图像不支持活动选择器。为什么不在 Javascript 中设置不透明度？

您可以在 displayImage 函数中使用 设置图像的不透明度this.style.opacity=1;。

当然，您还需要重置以前缩略图的不透明度，这样它们就不会保持不透明度 1：

var thumbnails = document.getElementById("thumbnails").getElementsByTagName("img");
for (i=0; i<thumbnails.length; i++)
    thumbnails[i].style.opacity=null;

在缩略图周围创建一个 ID 为“thumbnails”的 div，以使其正常工作。

我在这里创建了一个更新http://jsfiddle.net/g2hY4/2/。