Question

我有以下代码，它在我的表格中显示没有边框的图像，然后在悬停时显示橙色边框：

table.test {
}
.test img {
    border: solid 4px transparent;
}
.test img:hover {
    border-color: orange;
}

如果尝试以下操作，我希望点击后边框保持橙色，但不会

.test img:active {
    border-color: orange;
}

使用的图像是缩略图大小而不是复选框。

任何想法如何在点击后保持边框橙色？

Answer 1

您可以创建一个名为orangeborder的类（或其他任何类）。赋予它border-color:orange;。

的属性

然后你可以使用jQuery并使用：

$('img').click(function(){
  $(this).toggleClass('orangeborder');
});

jsFiddle

Answer 2

检查这个fiddle可能会帮助你使用简单的jquery让你输出

$('.test img').on('click', function(){
        //use jquery css function
     $(this).css({"border-color":"orange"});
 // or   add class .active with your own style
       $(this).addClass('active');
})

将您的图像设为块元素并添加此jquery点击事件。解决

Answer 3

图片无法使用有效。 http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-active.Wrap它在一个锚点内并防止锚点击默认值并改变光标吗？

css img：悬停工作，img：active不是

3 个答案: