[css] Problema Link Hover

[ciro78]

Salve a tutti

ho letto
http://grafica.html.it/articoli/legg...con-photoshop/

In pratica dal tutorial si capisce che per creare un effetto rollover su un link senza attendere che la seconda immagine, bisogna usare background position.

Ora seguendo quel tutorial volevo usarlo per applicarlo ad un link testuale. Il problema è che vedo lo sfondo solo per la lunghezza del testo e non per la lunghezza dello sfondo stesso. Ho provato a impostare la lunghezza per il link ma, non ottengo il risultato sperato

Come posso rimediare?

ciao e grazie

[StefanoC]

la lunghezza dello sfondo è l'elemento che contiene il testo. Potrebbe essere un <div> oppure il <TD> di una tabella oppure (ma più difficile) un elemento <UL>

applica la regolina css al contenitore e vedrai che risolverai il problema.

ciaoo
stefano

[ciro78]

ma se lo applico a ul o a li, con internet explorer non funziona

[elysaweb]

lo sfondo lo applichi all'elemento <a>

perchè funzioni, gli devi dare le proprietà:
#menu a {
display:block;
height:20px; /*altezza dello sfondo*/
width:100px; /*lunghezza dello sfondo */
background: url(menu.gif) no-repeat 0px 0px;
}

#menu a:hover {
background: url(menu.gif) no-repeat 0px 20px;
}

[ciro78]

io ho fatto cosi

a.menurosso { 
width: 120px;  
background-color: #e5e5e5; 
overflow: hidden;  
background-image:url(../img/menu/LinkRosso.jpg);
background-repeat: no-repeat;
} 

#r1 a:hover{ background-image:url(../img/menu/LinkRosso.jpg); background-position:50px;}

nel link

[url="#"]testo[/url] 

tieni presente che ci sono almeno 10 blink che devono avere quell'effetto

[elysaweb]

hai fatto così, ma non funziona, quindi perchè non mi ascolti?
:master:

a.menurosso { 
display:block; /*indispensabile!! */
width: 120px;  
height: 50px; /*metti l'altezza! */
background: #e5e5e5 url(../img/menu/LinkRosso.jpg) no-repeat 0px 0px; 
overflow: hidden;  
}

a:hover.menurosso{ 
background-position:0px 50px; /*devi mettere sia la distanza da sx sia dall'alto perchè funzioni*/
} 

nel link

[url="#"]testo[/url] 

[ciro78]

ho risolto. non era un problema di css ma bensì di posizione. Dovevo spostare l'immagine indietro invece che avanti meglio non pensarci.

grazie dell'aiuto

e buona domenica

[elysaweb]

Originariamente inviato da ciro78
ho risolto. non era un problema di css ma bensì di posizione. Dovevo spostare l'immagine indietro invece che avanti meglio non pensarci.

grazie dell'aiuto

e buona domenica

non so come faccia a funzionarti, meglio così