Radio Button Selector CSS ONLY pls -


i have created css image slider radio buttons control it. have set radio buttons visibility: hidden , using thumbnail images labels. html looks :

<div class="slider"> <input type="radio" value="navy" id="colour" name="attribute_colour" > <label for="navy"> <img src="uploads/navy.png"> </label>  

repeat lines 2-5 other thumbnails, :

<div class="slidermain"><ul> <li> <img src="uploads/navyfullsize.png"> </li> 

repeat lines 2-4 main images , close :

</ul></div></div>` 

i want clicking image navy.png move <ul> containing navyfullsize.png down 100%, have thought select button/image navy.png, should write stylesheet :

.slider input[type=radio]:checked + label[for=navy]~.slidermain>ul   { top:-100%; } 

but no avail! i've tried number of similar alternatives, don't know jquery, css solution helpful please.

1) positioning element requires either position: relative or position: absolute
2) using percentage values requires parent container's height set (for 1 200px)
3) label for attribute references input id, not value

give try.


Comments

Popular posts from this blog

visual studio - vb.net filter binding source by time -

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -