How can I set a default image in this slide show?

Question!

I created a slide show using HTML and CSS only following an example I saw elsewhere. It switches photos with the hover selector. How can I get the hover to stay on permamnently until I hover to another photo? How can I set a default picture to have the hover selector active? Something like this example, which I can't seem to fully adapt to my code: http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery-v2.html?

This is the code:

<!DOCTYPE html>
<html>
    <head>
      <link type="text/css"; rel="stylesheet"; href="SLideshow.css"/>
      <title>Untitled Document</title>
    </head>
<body>
<div class="SlideShow">
  <ul>
    <li>
      <img src="TheNorthFaceEcoGreen.jpg" class="Thumbnail">
      <div>
        <img src="TheNorthFaceEcoGreen.jpg" class="LargeImage">
      </div>
    </li>
    <li>
      <img src="PuenteAcelere.jpg" class="Thumbnail">
        <div>
          <img src="PuenteAcelere.jpg" class="LargeImage">
        </div>
    </li>
  </ul>
</div>
</body>
</html>

With this styling:

<style type="text/css">
.LargeImage{width:42em; height:23.2em;border-radius:15px;}
.Thumbnail{width:10em; height:6em;}
.SlideShow{width:42em;height:33.2em;overflow:hidden; border:solid black 2px;}
.SlideShow>ul{padding:0;margin:0;}
.SlideShow>ul>li{display:inline;margin:0em;padding:0em;font-size:1em;margin-    right:-0.2em;}
.SlideShow>ul>li>div{display:none;}
.SlideShow>ul>li:hover>div{display:block;float:left;}
</style>


Answers

I rewrite your code.

And I use "General sibling combinator".

http://www.w3.org/TR/selectors/#general-sibling-combinators

DEMO: http://jsfiddle.net/KgV33/1/

HTML:

By : GeckoTang


This video can help you solving your question :)
By: admin