如何更改我的图库以使用点击而不是悬停？

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;
}   

此致

安迪