Html 在纯CSS图像库中，如何使上次查看的图像保持不变，而不是恢复为默认图像？

此图库工作正常，只是当您将鼠标从缩略图列表上移开时，它会恢复为默认图像。有什么想法吗

以下是CSS：

#gallery {width:750px; height:450px; position:relative;}
#gallery .default {position:absolute; left:7px; top:5px; border:10px solid rgba(255,255,255,0.5); z-index:-1; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#gallery ul {list-style:none; padding-top:25px; margin-top:10px; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}

#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:5px; background-color: #83d4ff;}
#gallery ul li a img {width:50px; height:50px; border:0;}

#gallery ul li a b {position:absolute; left:-9999px; display:block; width:570px; height:420px; background:#83d4ff;}

#gallery ul li a:hover,
#gallery ul li a:active,
#gallery ul li a:focus {white-space:normal; border-color:#83d4ff; background-color: rgba(255,255,255,0.5); outline:0;z-index:100;}

#gallery ul li a:hover b {position:absolute; left:0; top:5px; z-index:99;}
#gallery ul li a:active b,
#gallery ul li a:focus b {position:absolute; left:0; top:5px;}


#gallery ul li a b i {display:block; width:570px; height:400px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto; border:10px solid rgba(255,255,255,0.5);-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

以及HTML：

    <div id="gallery">
        <img class="default" src="images/p1.jpg" alt="" />
            <ul>
                <li><a href="#x"><img src="images/p1.jpg" alt="" /><b><span></span><i><img src="images/p1.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p2.jpg" alt="" /><b><span></span><i><img src="images/p2.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p3.jpg" alt="" /><b><span></span><i><img src="images/p3.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p4.jpg" alt="" /><b><span></span><i><img src="images/p4.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p5.jpg" alt="" /><b><span></span><i><img src="images/p5.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p6.jpg" alt="" /><b><span></span><i><img src="images/p6.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p7.jpg" alt="" /><b><span></span><i><img src="images/p7.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p8.jpg" alt="" /><b><span></span><i><img src="images/p8.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p9.jpg" alt="" /><b><span></span><i><img src="images/p9.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p10.jpg" alt="" /><b><span></span><i><img src="images/p10.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p11.jpg" alt="" /><b><span></span><i><img src="images/p11.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p12.jpg" alt="" /><b><span></span><i><img src="images/p12.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p13.jpg" alt="" /><b><span></span><i><img src="images/p13.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p14.jpg" alt="" /><b><span></span><i><img src="images/p14.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p15.jpg" alt="" /><b><span></span><i><img src="images/p15.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p16.jpg" alt="" /><b><span></span><i><img src="images/p16.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p17.jpg" alt="" /><b><span></span><i><img src="images/p17.jpg" alt="" /></i></b></a></li>
                <li><a href="#x"><img src="images/p18.jpg" alt="" /><b><span></span><i><img src="images/p18.jpg" alt="" /></i></b></a></li>
            </ul>

    </div>

---

这是我为一位正在使用图库的朋友创建的网站：www.phantomglassstudio.com

你真的不能，不是用纯CSS-

悬停是你的全部，你可能需要一些Javascript或jQuery来为正在查看的图像添加一个类，悬停在其缩略图/触发器上-仅当悬停（查看）不同的图像缩略图/触发器时才删除该类，这样添加的“活动”类将保留在上次悬停/查看的图像上

然后，您只需将该类的样式设置为与初始：悬停效果相同

Javascript是一个选项吗

使用CSS，您可以实现类似的效果，但只有用户单击图像，在这种情况下，您可以将：hover样式应用于链接的：active和：focus伪状态-哦，对不起，刚才检查了您的链接，我看到您已经在使用focus和active样式-因此，您只需将：hover样式设置为“粘滞”

更新
示例：
-
-必须这样放置才能获得图像的基本href

它可以工作，但仍然不是很好，因为当用户将鼠标从触发器缩略图（上次查看的图像）上移开时，他们很可能会在“退出”时将鼠标悬停在其他人的上方，因此单击是最好的选择，在这种情况下，CSS就可以了；）