css - 如何将我的图库更改为单击而不是悬停？

Question

当谈到 CSS 和一般的编码时，我有点绿色。我正在尝试制作一个画廊，并且使用其他地方的代码已经做到了这一点：

http://mccarronandco.com/newsite/test.html

它几乎就在那里，但是当用户单击页面上的其他任何位置时，我试图停止主图片重置，因此当“焦点”离开其中一个缩略图时。这是页面的CSS：

.gallerycontainer{
position: relative;
float:left;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
}

.thumbnail:focus{
    background-color: transparent;
    outline:none;
}

.thumbnail:focus img{
    border: 1px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    left: -1000px;
    visibility: hidden;
    text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/

}

.thumbnail:focus span{ /*CSS for enlarged image*/
    position: absolute;
    visibility: visible;
    top: -520px;
    left: 30px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}   

问候，

安迪