How to get the last image viewed to stick instead of reverting to the default in a pure CSS image gallery?_问答_开发者

This gallery works fine except that when you mouseoff the list of thumbnails, it reverts to the default image. Any ideas?

Here's the 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;}

And the 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&g开发者_如何学JAVAt;</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>

And here's the website I'm making for a friend with the gallery in action: www.phantomglassstudio.com

You can't really, not with pure CSS - hover is all you've got, you would likely need some Javascript or jQuery to add a class to the image being viewed, on hover of it's thumbnail/trigger - only removing the class when a different image thumbnail/trigger was hovered on (viewed), that way the added "active" class would remain on the last image hovered/viewed

you would then just style this class the same as your initial :hover effect

Is Javascript an option?

~~with CSS you can achieve something like it but only user clicks the image in which case you can apply the :hover style to the :active and :focus pseudo states of the links~~ - oops sorry just checked your link and I see you are already using the focus and active styles - so it is just the :hover you need to make "sticky"

Update

Examples: JSfiddle (fullpage) - JSfiddle (code and small page only) - had to put it like this to get your base href for images

it works, but is still not great because as a user would move their mouse off a trigger thumbnail (last image viewed) they will likely hover over others on the way "out", so a click is the best option, in which case CSS does fine ;)