无法使主动选择器工作

Question

我使用以下代码设置了一个图库类型页面：

http://jsfiddle.net/g2hY4/

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

 #One:active {
     opacity: 1;
 }

但这不起作用。

任何帮助都会很棒！

Answer 1

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

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

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

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

在缩略图周围创建一个id为“缩略图”的div，以便工作。

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