html - 如何在 CSS 中实现对图像的 .selected

Question

我在突出显示单击元素的图像时遇到了一些困难。选定的小图像缩略图在另一个 div 中显示较大的图像(我工作正常)。

HTML

    <div id=samplepanel">
    <a href="_images/bigimage1.png"><img class="sampleclass" src="_images/smallimage1.png" width="50" height="50" ></a> 
    <a href="_images/bigimage2.png"><img class="sampleclass" src="_images/smallimage2.png" width="50" height="50" ></a>
    </div>

CSS

   #samplepanel img
   {
   display: inline-block;
   border: 2px dotted #5466DD;
   }
   #samplepanel img.selected
   {
   border: 5px solid #49E635;
   }

所以我想我的问题是我似乎无法让 img.selected 对我产生任何影响。

我尝试使用它来寻求帮助 - How to add class .selected dynamically to selected element here? - 不幸的是我还没有取得任何成功。

Answer 1

如果 .selected 没有被动态添加到您的 DOM，(与 jQuery 一样)CSS 将无法选择它。

但是，HTML 确实提供了一个可能与您相关的伪类:

#samplepanel a:active img{
    border: 5px solid #49E635;
}