CSS: La proprietà :focus - selezionare una riga

**Anu** · 27-11-2012, 10:41

Salve a tutti, sono nuovissimo del forum(mi presenterò nell'apposita sezione..)
Vorrei porvi un quesito:

data la seguente lista:

<div class="ciao">
<ul>[*]elemento1[*]elemento2[*]elemento3[*]elemento4[/list]
</div>

Vorrei che un elemento della lista rimanesse "attivo" al click.
Ho letto della proprietà focus, ma a quanto sembra non funziona.

CSS:

.ciao{
background:grey;
}
.ciao ul{

}
.ciao ul li{
width:100%;
cursorointer;
backgroundink;
}
.ciao ul li:hover{
background:black;
color:white;
}
.ciao ul li:focus{
background:red;
}

Grazie infinite

**Mich_** · 27-11-2012, 11:12

Con solo CSS non si puo` fare.

Sposto in JS

**Anu** · 27-11-2012, 11:16

Ottimo grazie, è già un'informazione molto utile!

**cavicchiandrea** · 27-11-2012, 12:07

codice:

<div class="ciao" onclick="this.style.backgroundColor='qui-metti-il-colore-che-vuoi'">
<ul>[*]elemento1[*]elemento2[*]elemento3[*]elemento4[/list]
</div>

**Mich_** · 27-11-2012, 12:19

Credo che Anu intendesse una cosa di questo tipo:

codice:

CSS:
.ciao{
  background:grey;
}
.ciao ul li{
  width:100%;
  background: ...;
}
.ciao ul li:hover{
  background:black;
  color:white;
}


JS:
var lastobj = "";    /* globale per ricordarsi ultimo evidenziato */

function attiva(obj) {
  lastobj.style.backgroundColor = "grey";
  obj.style.backgroundColor = "red";
  lastobj = obj;
}


HTML:
<div class="ciao">
  <ul>
    <li onclik="attiva(this);">elemento1
    <li onclik="attiva(this);">elemento2
    <li onclik="attiva(this);">elemento3
    <li onclik="attiva(this);">elemento4[/list]
</div>

Nota: con questa sintassi non funziona nei brwoser IE vecchi (e neppure nei nuovi con DTD transitional)

**Ferie** · 27-11-2012, 12:31

Prova a vedere se è questo quello che cerchi:

codice:

<!DOCTYPE html>
<html>
    <head>
    <meta charset=utf-8 />
        <title>Cambia colore sfondo al click</title>
        <style>
            .ciao{
                background:grey;
            }
            .ciao ul{
            }
            .ciao ul li{
                width:100%;
            }
            .ciao ul li:hover{
                background:black;
                color:white;
            }
            .rosso {
                background:red;
            }
        </style>
    </head>

    <body>
        <div class="ciao">
            <ul>
                <li onclick="this.className='ciao rosso'">elemento1
                <li onclick="this.className='ciao rosso'">elemento2
                <li onclick="this.className='ciao rosso'">elemento3
                <li onclick="this.className='ciao rosso'">elemento4[/list]
        </div>
    </body>
</html>

**Anu** · 27-11-2012, 13:13

Grazie a tutti e tre,
il metodo di ferie e cavicchiandrea funziona, solo che il li poi rimane selezionato non posso più toglierlo... Mi sono dimenticato di specificare che deve essere una selezione univoca, ovvero solo un elemento per volta.
Per quanto riguarda Mich_, il crossbrowser è fondamentale per questo sito che devo fare

**Mich_** · 27-11-2012, 13:34

Il fatto e` che le pseudoclassi nei browser IE si applicano solo ai tag <a>.
Pertanto in questo senso tutti i metodi non funzionano allo stesso modo.

Se pero` usi una DTD Strict, allora anche IE (dal 6 in poi) funziona in modo standard, e le pseudoclassi dovrebbero funzionare anche per gli altri tag.

Per quanto riguarda la parte JS, fondamentalmente la logica che sta sotto ai tre metodi e` simile; nel mio pero` c'e` anche il reset dell'ultimo elemento selezionato prima di selezionare il prossimo.

So che ci sono metodi piu` furbi per farlo, ma sono ormai anni che non uso piu` JS, e non ricordo piu` tante cose.

**Anu** · 27-11-2012, 13:51

Originariamente inviato da Mich_
Il fatto e` che le pseudoclassi nei browser IE si applicano solo ai tag <a>.
Pertanto in questo senso tutti i metodi non funzionano allo stesso modo.

Se pero` usi una DTD Strict, allora anche IE (dal 6 in poi) funziona in modo standard, e le pseudoclassi dovrebbero funzionare anche per gli altri tag.

Per quanto riguarda la parte JS, fondamentalmente la logica che sta sotto ai tre metodi e` simile; nel mio pero` c'e` anche il reset dell'ultimo elemento selezionato prima di selezionare il prossimo.

So che ci sono metodi piu` furbi per farlo, ma sono ormai anni che non uso piu` JS, e non ricordo piu` tante cose.

Capisco.. in tal caso non potrei semplicemente assegnare un tag <a> alla[*] e poi disabilitare il suo utilizzo oppure viola qualche regola?
Grazie

**Mich_** · 27-11-2012, 14:13

Esatto: quello e` il workaround che si usa:

codice:

[*] ...   [*] ...

Poi nel CSS devi anche aggiungere:

codice:

.... li a {
  display: block;
  width: 100%;
  height: 100%;
}

e ricorda poi di applicare tutti gli attributi CSS e il JS al tag <a> anziche` al tag[*]

Discussione: CSS: La proprietà :focus - selezionare una riga

Strumenti discussione

Ricerca discussione

Visualizza

CSS: La proprietà :focus - selezionare una riga

Permessi di invio