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;

それが機能するように、サムネイルの周りに「thumbnails」という ID を持つ div を作成します。

ここで更新を作成しましたhttp://jsfiddle.net/g2hY4/2/。