Giusto per info, si può fare il tutto in puro CSS senza javascript. Esempio (il look fa schifo):
codice:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Esempio</title> <style type="text/css"> fieldset.choose-form ul, input[type="radio"].form-connect, input[type="radio"].form-connect ~ div { display: none; } fieldset.choose-form:hover > ul, input[type="radio"].form-connect:checked + div { display: block; } fieldset.choose-form { display: inline-block; position: relative; vertical-align: middle; overflow: visible; padding: 0; margin: 0; border: none; } fieldset.choose-form legend { display: block; border: 1px #666666 solid; background-color: #ccaaee; padding: 2px; } fieldset.choose-form ul { position: absolute; height: auto; /* vertical-menus width */ width: 160px; border: 1px #666666 solid; background-color: #dddddd; list-style-type: none; margin: 0; padding: 0; } fieldset.choose-form li { position: relative; float: none; display: block; height: 28px; width: 100%; border: none; } fieldset.choose-form label { display: block; height: 100%; width: 96%; padding: 0 0 0 4%; line-height: 28px; background-color: transparent; border: none; color: #000000; font-family: georgia, serif; font-size: 11px; font-style: normal; cursor: pointer; } fieldset.choose-form li:hover label { background-color: #cccccc; color: #ff0000; } </style> </head> <body> <div> Tipo di form: <fieldset class="choose-form"> <legend>- scegli chi -</legend> <ul> <li><label for="form-conn-1">Mario</label></li> <li><label for="form-conn-2">Enzo</label></li> <li><label for="form-conn-3">Dina</label></li> <li><label for="form-conn-4">Franco</label></li> </ul> </fieldset> </div> <input class="form-connect" type="radio" name="prima" value="div1" checked id="form-conn-1" /> <div class="form-container">default</div> <input class="form-connect" type="radio" name="prima" value="div2" id="form-conn-2" /> <div class="form-container">Un form</div> <input class="form-connect" type="radio" name="prima" value="div3" id="form-conn-3" /> <div class="form-container">Un altro form</div> <input class="form-connect" type="radio" name="prima" value="div4" id="form-conn-4" /> <div class="form-container">Un altro form ancora</div> </body> </html>![]()

Rispondi quotando