Problema stile a:hover

[keron]

Salve ragazzi,
ho una tabella alla quale vado ad applicare questo stile

.tabella_principale td a:hover { text-decoration:none; background:black; color:white; -webkit-border-radius:24px; -moz-border-radius:4px; border-radius:4px}

il mio problema che al interno di questo tabella ci saranno anche immagini e quando ne inserisco una dentro a un tag <a> anch'essa prende lo stile che ho messo qui sopra..
ecco io vorrei evitare che cio accadesse...
ho provato con:
.tabella_principale td a:hover img{ }settato i parametri sopra a none ma nn cambia nulla.. dove sbaglio?
grazie a tutti

[keron]

nessuno? nemmeno un consiglio su come poter sviare al problema? :S

[marco.carrieri]

Prova a spiegarti meglio purtroppo non capisco bene cosa dovrebbero fare i normali link e cosa invece le immagini dentro i link.

[keron]

ciao, ti ringrazio per la risposta.. cerco di spiegarmi meglio: ho creato una tabella e gli ho dato la seguente classe

.tabella td a:hover { text-decoration:none; background:black; color:white; -webkit-border-radius:24px; -moz-border-radius:4px; border-radius:4px}

Questa mi fa in modo che quando c'è un link nella tabella nel td, quando gli si passa sopra crea un effetto di hover cambiando colore di sfondo e arrotondando gli angoli su ff..

Il mio problema è che alcuni link sono rappresentati da immagini e non da testo.. io vorrei creare una regola che se vede una immagine al interno del td non applica lo stile che ho messo sopra.

Quello che ho provato a logica è stato:
.tabella td a:hover img { }
ma l'effetto viene cmq applicato sopra all'immagine..
Ho provato anche
.tabella td a:hover img { -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px }

ma non ne vuole sapere di andare... non riesco a capire dove sbaglio...
grazie ancora per l'aiuto!

[miki003]

Hai provato così?

.tabella td a:hover {
	text-decoration:none; 
	background:black; 
	color:white; 
	-webkit-border-radius:24px; 
	-moz-border-radius:4px; 
	border-radius:4px;
}
.tabella td img a:hover {
	text-decoration:none;
	-webkit-border-radius:0px; 
	-moz-border-radius:0px; 
	border-radius:0px;
}

/*OPPURE*/

.tabella td a:hover {
	text-decoration:none; 
	background:black; 
	color:white; 
	-webkit-border-radius:24px; 
	-moz-border-radius:4px; 
	border-radius:4px;
}
.tabella td img:hover {
	text-decoration:none;
	-webkit-border-radius:0px; 
	-moz-border-radius:0px; 
	border-radius:0px;
}

[keron]

ho provato entrambi ma nessuno dei due funziona.. l'effetto viene applicato cmq..

[Mich_]

In pratica tu chiedi:
se un oggetto <a> contiene del testo applica un certo effetto, se contiene un'immagine non applicarlo.
Servirebbe un "selettore di genitorialita`", che pero` non esiste (che io sappia).

Quello che puoi fare (ma richiede modifiche alla marcatura) e` definire un oggetto all'interno del link a cui applicare l'effetto.

Esempio (da sviluppare)

HTML:
<span>qui del testo</span>
[img]...[/img]

CSS:
a { formattazione comune ai due }
a:hover { formattazione comune ai due :hover }
a span { formattazione per il testo (a riposo) }
a:hover span { formattazione per il testo (con mouseover) }
a img { formattazione per l'immagine (a riposo) }
a:hover img { formattazione per l'immagine (con mouseover) }

Nota che non e` proprio quello che chiedevi, pero` con un po' di attenzione si puo` riuscire a farlo apparire come lo volevi
E` da notare che il link rimane comunque rettangolare, ma se il link stesso non ha sfondo e non ha bordi (che vanno tutti spostati nello span) quello che appare e` l'effetto richiesto.
Solo se passi con il mouse nell'angolo (fuori dallo span ma dentro il link), noti che il link e` piu` esteso della grafica.