[css/xhtml] Alleen geselecteerde elementen tonen

[cyberstalker]

Ik heb het volgende formulier:

HTML:

<label>Status</label>
<div class="state">
    <input type="radio" value="1" name="status_profile" id="status_1" checked="checked" /><label for="status_1">Actief</label>
    <input type="radio" value="2" name="status_profile" id="status_2" /><label for="status_2">Ontslagen</label>
    <input type="radio" value="3" name="status_profile" id="status_3" /><label for="status_3">Gestopt - niet meer bellen</label>
    <input type="radio" value="4" name="status_profile" id="status_4" /><label for="status_4">Gestopt - nog wel bellen</label>
    <input type="radio" value="5" name="status_profile" id="status_5" /><label for="status_5">Pauze</label>
    <input type="radio" value="6" name="status_profile" id="status_6" /><label for="status_6">Kantoormedewerker</label>
    <input type="radio" value="7" name="status_profile" id="status_7" /><label for="status_7">Klant</label>
</div>
    
<label>Vestiging</label>
<div class="department">
    <input type="checkbox" name="department[]" id="department_1" value="1"  checked="checked" /><label for="department_1">TSU Haarlem</label>
    <input type="checkbox" name="department[]" id="department_5" value="5"  /><label for="department_5">TSU Groningen</label>
    <input type="checkbox" name="department[]" id="department_9" value="9"  /><label for="department_9">TSU Den Haag</label>
</div>

Nu wil ik dat wanneer je niet over een van de divs hovert, je alleen de bijbehorende tekst van de geselecteerde items te zien krijgt, eventueel gescheiden door een komma. Ik heb de volgende relevante CSS:

Cascading Stylesheet:

input[type="text"],
input[type="submit"],
div.state,
div.department
{
    display: block;
    width: 150px;
    
    padding-left: 4px;
    margin-bottom: 2px;
    
    float: left;
    clear: right;
    
    border: 1px solid gray;
    background-color: #DFD;
}

fieldset div input[type="radio"],
fieldset div input[type="checkbox"]
{
    display: none;
}

fieldset div:hover input[type="radio"],
fieldset div:hover input[type="checkbox"]
{
    display: block;
    float: left;
    clear: left;
}

fieldset div.disabled:hover input[type="radio"],
fieldset div.disabled:hover input[type="checkbox"]
{
    display: none;
}

fieldset div input[type="radio"] + label,
fieldset div input[type="checkbox"] + label
{
    display: none;
}

fieldset div:hover input[type="radio"] + label,
fieldset div:hover input[type="checkbox"] + label
{
    display: block;
    width: auto;
    clear: right;
}

fieldset div.disabled:hover input[type="radio"] + label,
fieldset div.disabled:hover input[type="checkbox"] + label
{
    display: none;
}

fieldset div input[type="radio"][checked] + label,
fieldset div.disabled input[type="radio"][checked] + label,
fieldset div input[type="checkbox"][checked] + label,
fieldset div.disabled input[type="checkbox"][checked] + label
{
    display: block;
    width: auto;
    clear: right;
}

fieldset div input[type="checkbox"][checked] + label:after
{
    content: ', ';
}

fieldset div input[type="checkbox"][checked] + label:last-child:after,
fieldset div:hover input[type="checkbox"][checked] + label:after
{
    content: '';
}

input[disabled], div.disabled
{
    border: 1px dotted gray;
    color: gray;
}

Dit werkt prima om de elementen te laten zien die bij het laden van de pagina geselecteerd zijn. Dit update echter niet wanneer een user een ander element te zien krijgt.

Is er een manier om dit om pure html/css op te lossen. Ik wil dit zonder javascript doen indien enigszins mogelijk.

Voorbeeldje kun je bekijken op: http://salesunit.xs4all.nl/gotexample/index.xhtml

[user109731]

Weet niet voor welke browsers je ontwikkeld? Zo te zien niet voor IE Ik heb die pagina gedownload, en in de CSS met een replace [checked] in :checked veranderd, dat lijkt er al aardig op

edit: ook in opera getest, en daar werkt het helemaal goed zo te zien, itt firefox die iets als een extra rand weergeeft net als in firefox nu (?)

[ Voor 25% gewijzigd door user109731 op 23-10-2006 20:58 ]

[cyberstalker]

Dit was precies de oplossing die ik zocht. Ontzettend bedankt .

[cyberstalker]

Toch nog een klein probleempje. Ik wil zoals gezegd de lijst van vestigingen scheiden met een komma (,) indien er meerdere vestigingen geselecteerd zijn.

Ik probeer dat te doen met de volgende CSS:

Cascading Stylesheet:

fieldset div input[type="checkbox"]:checked + label:after
{
        content: ', ';
}

Dit geeft de komma tussen de vestigingen. Nu wil ik dat de laatste vestiging natuurlijk geen komma heeft, dit doe ik met het volgende.

Cascading Stylesheet:

fieldset div input[type="checkbox"]:checked:last-child + label:after
{
        content: '';
}

Het probleem is dat alleen de laatste vestiging geen komma krijgt, i.p.v. de laatste geselecteerde vestiging.

Is er een manier om dit te doen in CSS?

[cyberstalker]

schopje