html - 使点击的图像具有样式

Question

目前我有 3 张图片，悬停时它们周围有边框，我想要的是当用户单击图片时悬停样式保留在该图片上，我尝试使用 :active 但无济于事。

这是CSS代码:

.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}

.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}

和 fiddle :http://jsfiddle.net/N22Jc/

Answer 1

:active 仅在用户将鼠标按下元素时保持有效。

您将需要使用 JavaScript 来完成此操作。