[css] hover annidato

**Xsescott** · 22-09-2010, 18.53.27

Ragazzi ho questa situazione:

Codice HTML:

span.titoloAntico{
	border-bottom: 2px dotted red;
	position:relative;
	}
span.titoloAntico span.titAnt{
      display:none;
}
span.titoloAntico:hover span.titAnt{
    display:block;
    position:absolute;
    border:1px solid black;
    background-color:#FFCC99; color:white;
    text-align:center;
    font-family: antico;
    top: 2em; left:2em; width:10em;   
}

<span class="titoloAntico">test<span class="titAnt">popup</span></span>

praticamente quando mi si apre il blocco in hover le sottolineature coprono il blocco, come posso sistemare, esiste qualche attributo per metterlo al livello superiore il blocco?

**karl94** · 22-09-2010, 19.02.34

Così come l'hai scritto tu, non ci sono sovrapposizioni. Puoi scrivere il codice per intero o l'indirizzo della pagina?

**Xsescott** · 22-09-2010, 20.46.40

Mi dispiace ma è in locale.
il mio problema è che ho più span con le stesse classi che possono ritrovarsi nelle vicinanze di quel testo, esempio:

Codice HTML:

<span class="titoloAntico">test<span class="titAnt">popup</span></span>

praticamenteio inizialmente vedo solo lo span "test"

quando ci passo sopra col puntatore attivo l'hover che mi fa vedere una specie di popup (tipo come fà l'attributo title).

il problema è che io ho altri span, e praticamente quando attivo l'hover tutto ciò che è negli span viene visto in primo piano nel blocco dell'hover, mentre il testo che non stà negli span lo vedo sotto.

come fare a mettere tutto il blocco titAnt in primo piano quando appare?

quindi la domanda è: esiste un attributo che mi fa decidere quale contenitore far vedere se si trovano sulla stessa posizione?

**karl94** · 22-09-2010, 21.00.55

La proprietà che ti serve è z-index, impostala su un valore alto (100 per esempio) sul blocco che vuoi mettere in primo piano.

**Xsescott** · 22-09-2010, 21.04.30

Originalmente inviato da karl94

La proprietà che ti serve è z-index, impostala su un valore alto (100 per esempio) sul blocco che vuoi mettere in primo piano.

si infatti stavo leggendo proprio questo in questo momento:
http://users.dimi.uniud.it/~giorgio....SS_dinamic.htm

ho messo in span titoloAntico 1 e in titAnt 2, l'unica cosa è che la classe titoloAntico è impostata con position:relative, funzionerà? provo..

**karl94** · 22-09-2010, 21.09.39

Originalmente inviato da Xsescott

si infatti stavo leggendo proprio questo in questo momento:
http://users.dimi.uniud.it/~giorgio....SS_dinamic.htm

ho messo in span titoloAntico 1 e in titAnt 2, l'unica cosa è che la classe titoloAntico è impostata con position:relative, funzionerà? provo..

Ti consiglio di usare come fonte di informazioni le specifiche: sulle guide non c'è sempre tutto, ma nelle specifiche che definiscono cos'è il CSS sì.
Per esempio, tu ti stai chiedendo se funziona con il posizionamento relativo, nelle specifiche della proprietà z-index trovi scritto

Applies to: positioned elements

ed ecco la risposta alla tua domanda.

**Xsescott** · 22-09-2010, 21.35.17

Originalmente inviato da karl94

Ti consiglio di usare come fonte di informazioni le specifiche: sulle guide non c'è sempre tutto, ma nelle specifiche che definiscono cos'è il CSS sì.
Per esempio, tu ti stai chiedendo se funziona con il posizionamento relativo, nelle specifiche della proprietà z-index trovi scrittoed ecco la risposta alla tua domanda.

non trovo la risposta a questa domanda: il fatto che si parli di blocchi figli la regola funziona lo stesso o vale solo per blocchi che sono fratelli fra loro?

edit:
ok, è possibile!
anche se non riesco a capire una cosa....

allora inizialmente ho messo z-index:1 in span.titoloAntico e z-index:2 in span.titAnt

e cosi non funzionava, mente togliendo z-index da span.titoloAntico e mettendo z-index:1 in span.titAnt ora ho l'effetto desiderato, chi mi sa spiegare il perchè? :/

**karl94** · 22-09-2010, 22.15.39

Per capre bene e spiegare il perché dovrei vedere il codice della pagina per intero, puoi postarlo?

22-09-2010, 22.29.09

Prova a mettere l'attributo !important da qualche parte, poiché questo lo dovrebbe far mettere in primo piano! =)

**Xsescott** · 22-09-2010, 22.29.42

Originalmente inviato da karl94

Per capre bene e spiegare il perché dovrei vedere il codice della pagina per intero, puoi postarlo?

Codice HTML:

<div class="gwt-HTML schedTest x-component" id="x-auto-49" style="width: 584px; height: 228px; ">
      
       
      <br>1. to et <span title="SC"> </span><span class="titoloAntico"><span class="titAnt">SG: </span>d</span>ifficult<span class="titoloAntico"><span class="titAnt">modernizzazione: a</span>à</span> <span style="text-decoration:underline"><span class="titoloAntico1"><span class="titAnt1">contraction: ī</span>in</span>tro<span class="titoloAntico"><span class="titAnt">SG: </span>d</span>a<span class="titoloAntico"><span class="titAnt">SG: </span>ct</span>o</span> certo ra<span class="titoloAntico"><span class="titAnt">SG: </span>g</span>iona<br>2. mento
      <span class="titoloAntico"><span class="titAnt">SG: </span>d</span><span title="aggiuntaPunteggiatura">'</span>acor<span class="titoloAntico"><span class="titAnt">SG: </span>d</span>o uenen<span class="titoloAntico"><span class="titAnt">SG: </span>d</span>o il <span title="SC"> </span>con<span class="titoloAntico"><span class="titAnt">SG: ſ</span>s</span>olo a <span title="SC"> </span>collo<br>3. quio c<span class="titoloAntico1"><span class="titAnt1">contraction: ō</span>on</span> <span title="SC"> </span>llu<span class="titoloAntico"><span class="titAnt">SG: </span>i</span>, fu pre<span class="titoloAntico"><span class="titAnt">SG: ſ</span>s</span>o <sup><a style="font-size: 0.8em;" href="#M1">gloss</a></sup>
      a<span class="titoloAntico"><span class="titAnt">SG: </span>d</span> <span title="SC"> </span>in<span class="titoloAntico"><span class="titAnt">SG: </span>g</span>anno et in<span class="titoloAntico"><span class="titAnt">SG: ſ</span>s</span>ieme <br>4. c<span class="titoloAntico1"><span class="titAnt1">contraction: ō</span>on</span> <span title="SC"> </span>,,,,,,,,,,,,,,,,,

</div>

il css lo hai sopra!

questo è il risultato di una trasformazione xslt su un file xml-tei.

**karl94** · 23-09-2010, 18.35.58

Originalmente inviato da Xsescott

non riesco a capire una cosa....

allora inizialmente ho messo z-index:1 in span.titoloAntico e z-index:2 in span.titAnt

e cosi non funzionava, mente togliendo z-index da span.titoloAntico e mettendo z-index:1 in span.titAnt ora ho l'effetto desiderato, chi mi sa spiegare il perchè? :/

Questo perché ogni volta che imposti in un elemento la proprietà z-index su un valore diverso da auto, la proprietà z-index negli elementi da esso dipendenti funziona in modo "locale".
Per esempio, se avessi impostato z-index su 5 in .titoloAntico e su 1 in .titAnt, il risultato non sarebbe cambiato, perché z-index all'interno di .titoloAntico funziona in modo locale e non assoluto.

**Xsescott** · 25-09-2010, 15.18.47

Originalmente inviato da karl94

Questo perché ogni volta che imposti in un elemento la proprietà z-index su un valore diverso da auto, la proprietà z-index negli elementi da esso dipendenti funziona in modo "locale".
Per esempio, se avessi impostato z-index su 5 in .titoloAntico e su 1 in .titAnt, il risultato non sarebbe cambiato, perché z-index all'interno di .titoloAntico funziona in modo locale e non assoluto.

ho capito. grazie mille per la spiegazione :)

Discussione: [css] hover annidato

LinkBack

Strumenti discussione

Display

[css] hover annidato

Regole di scrittura