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:\[code\]<!DOCTYPE html><html> <head> <link type="text/css"; rel="stylesheet"; href="http://stackoverflow.com/questions/14598062/SLideshow.css"/> <title>Untitled Document</title> </head><div class="SlideShow"> <ul> <li> <img src="http://stackoverflow.com/questions/14598062/TheNorthFaceEcoGreen.jpg" class="Thumbnail"> <div> <img src="http://stackoverflow.com/questions/14598062/TheNorthFaceEcoGreen.jpg" class="LargeImage"> </div> </li> <li> <img src="http://stackoverflow.com/questions/14598062/PuenteAcelere.jpg" class="Thumbnail"> <div> <img src="http://stackoverflow.com/questions/14598062/PuenteAcelere.jpg" class="LargeImage"> </div> </li> </ul></div><body></body></html>\[/code\]With this styling:\[code\]<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>\[/code\]
How can I set a default image in this slide show?
- Thread starter cauet
- Start date