Newsgroup: it.comp.www.html
Titolo: [CSS] span e hover

Ragazzi, sono ancora qui a chiedervi aiuto :(
Nel mio .css ho definito due classi diverse per i link e i relativi hover:
a:link, a:hover
b:link, b:hover
Ora, 'a' č la classe predominante, se voglio invece che un link si
visualizzi come indicato dalla classe 'b' faccio cosě:
<a href="
http://www.xyzcom
" title="blabla"><span
class="b">Clickclick</span></a>
E' corretto? Mi sa di no! Perchč cosě il link si visualizza sě bene, ma
al passaggio del mouse si comporta secondo quanto ho impostato in 'a'.
Aggiungo che su Safari invece si vede bene, ma solo su quello! Boh.
Dove ho fallito?? :'(
Acc...che fatica, che frustrazione le cose che non funzionano :P
Grazie ancora,
a.
-- 
one moment pls
www.doodle.de.vu

 a.
-- 
Spirito Libero
"La verità non sta in un solo sogno ma in molti sogni!"
(Le mille e una notte)

"anto (='-'=)" ha scritto:
|Ragazzi, sono ancora qui a chiedervi aiuto :(
Nel mio .css ho definito due classi diverse per i link e i relativi hover
Ciao anto,
    ecco come definire due classi di link via css
a.greatlink{/* ecc*/}
a.greatlink:hover{/* ecc*/}
a.littlelink{/* ecc*/}
a.littlelink:hover{/* ecc*/}
Le classi vanno indicate con il punto davanti, e per i link
č buon uso anteporre la "a" cosě si individuano subito.
Spirito Libero ha inteso che tu indessi definire il css dei tag
<a> e <b> invece che definire due classi di <a>,
una class="a" e l' altra class="b".
E' buona norma, anche negli esempi, usare nomi indicativi
e comunque non facilmente equivocabili (a e b, coincidenza,
sono nomi di tag).
Innestare uno span nel link ha senso solo se lo definisci via css,
tieni conto che trattarlo č abbastanza delicato e io preferirei, a meno
che non necessario, magari definire due classi di link come ti ho scritto
sopra.
Comunque in questo caso potresti definire ad esempio:
a.greatlink span {/*presentazione dello span su tutti gli stati della classe "greatlink" */}
a.greatlink:hover span {/*ridefinizione dello span al passaggio del mouse su link con classe "greatlink" */}
Nel tuo esempio non ha effetto lo stile che vuoi attribuire lo span
al passaggio del mouse in quanto lo stato :hover di <a> predomina
sullo span, almeno cosě credo.
Saluti,
    SantaKlauss

     SantaKlauss


"Spirito Libero"  ha scritto:
| Giusto, giusto. ;)
| Lui pero' nel foglio di stile definiva le regole: b:link e b:hover, come
| se volesse definire gli stili di <b></b>.
E' una lei ,credo. Infatti, come ho detto, mancava il punto davanti.
| Credo che non funzioni perche' l'elemento span permette di applicare uno
| stile ad una parte di testo per cui non esista o non e' conveniente un
| altro elemento. <span></span>, infatti, se fosse incontrato da un
| browser che non supporti i fogli di stile (e' preistoria, pero' ancora
| ce ne sono), viene semplicemente ignorato, evitando di creare scatafsci
| con l'impaginazione. Nel nostro caso e' applicato, secondo me, in
| maniera errata, perche' nessun tipo di testo ha uno stato attivo o
| disattivo (come i link).
| Ovvio che quanto scritto e' solo una mia opinione opinabile ;)
E' vero, lo span non può avere lo stato :hover, ma se lo stesso effetto
si ottiene se lo si mette in un link e se si usa la gerarchia di stili, tipo:
a{ /*ecc*/ }
a:hover {/*ecc*/}
a span { /*ecc*/}
a:hover span {/*ecc*/}
Ma come ho detto può generare confusione, a meno che lo span innestato
non lo si usi per "effetti speciali"
(un esempio, veramente notevole e geniale, è su:
 
http://www.meyerweb.com/eric/css/edge/popups/demo.html
 )
A parer mio, per ciò che voleva ottenere anto (se ho capito bene...)
è meglio usare due classi di link, invece che una classe di link e una di span.
Saluti,
    SantaKlauss

 sullo span, almeno così credo.
Chiamandola solo .dev e .dev:hover e usando quel codice sopra sembra non
s'offenda nessun browser. Per il momento m'accontento.
GRAZIE ancora per la spiegazioni.


 Ovvio che quanto scritto e' solo una mia opinione opinabile ;)
Non esistono opinioni in html/css e compagnia bella, c'è la dittatura
del W3C! ;) O produci un codice corretto o produci un codice sbagliato.
Certo, FP a parte, a volte del codice non proprio ortodosso funziona lo
stesso, ma non è bello! ;)


"anto (='-'=)"  ha scritto:
| SantaKlauss, questo nick ti ci sta proprio tutto ;)
Grazie *<|:-)
| Ecco, hai capito al volo. Mi sono espressa male evidentemente, comunque
| 'a' e 'b' stavano per tipo 'x' e 'y'. La classe che ho chiamato 'b' in
| realtà si chiama .dev e .dev:hover ed è così:
|
| .dev{
| color : #333333;
| font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
| font-size : 10px;
| font-weight : normal;
| text-decoration : none;
| }
| .dev:hover{
| color : #CC0000;
| font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
| font-size : 10px;
| font-weight : normal;
| text-decoration : none;
| border-bottom-width: 1px;
| border-bottom-style: dotted;
| border-bottom-color: #333333;
| background-color: #D7DBC8;
| }
|
Ciao anto,
    una cosa che ti verrà utile sapere a:hover eredita tutto da a,
quindi in a:hover ti basta definire solo le differenze. Inoltre, per
scrivere css molto più snelli puoi usare gli shorthands (sono regole
che riassumono + regole: quelle che mi vengono in mente ora sono
font, border, margin, padding e background, ma può darsi che me ne
sia persa qualcuna). Guarda come le due regole vengono + compatte così:
a.dev
{
    background-color: transparent;
    color: #333;
    font: 10px normal Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none
    }
a.dev:hover{
    background-color: #D7DBC8;
    color: #C00;
    border-bottom: 1px dotted #333
    }
| Altra stranezza: ho provato ad aggiungere a. in modo da avere 
a.dev
 etc
| etc. Così però i link venivano visualizzati secondo la classe a. ('.a' e
| basta) che già uso come 'stile base', come se predominasse, un pò come
| scrivi tu sotto:
|
| > Nel tuo esempio non ha effetto lo stile che vuoi attribuire lo span
| > al passaggio del mouse in quanto lo stato :hover di <a> predomina
| > sullo span, almeno così credo.
|
Allora, se nel css definisci:
a{ /*stile base*/}
a:hover{ /*stile base*/}
a.dev
{ /*classe particolare*/}
a.dev:hover{ /*classe particolare*/}
dovresti tener conto che la classe '
a.dev
' eredita tutto dalle definizioni di 'a',
a cui aggiunge, e sovrascrive, le sue regole.
Discorso ancora + complicato, ad esempio, per a.dev:hover che eredita
proprietà da tutte le altre tre regole, a cui aggiunge le sue, credo che gli
vengano attribuite in quest' ordine:
1) a.dev:hover
2) 
a.dev
3) a:hover
4) a
| Chiamandola solo .dev e .dev:hover e usando quel codice sopra sembra non
| s'offenda nessun browser. Per il momento m'accontento.
Se scrivi le classi ".dev" e ".dev:hover" senza la a davanti dovrebbe essere
perchè l' ereditarietà da "a" viene spezzata, almeno credo (è comunque corretto:
anteporre la "a" davanti è buon uso, ma non è obbligatorio: se non la metti, al limite
mettigli un commento a fianco per ricordarti che è un link).
| GRAZIE ancora per la spiegazioni.
Figurati! Ciao,
    SantaKlauss

 quindi in a:hover ti basta definire solo le differenze.
Comodissimo! Grazie del 'tip', e sappi che salvo ancora un altro tuo
post ;o)
