a:hover - non nelle immagini

[George_star]

Ciao a tutti,
ho già cercato la soluzione ma non riesco a trovarla.
Il problema: in una pagina ho una serie di link che passandoci sopra prendono uno sfondo di colore diverso. I link possono essere fatti con un testo solo, solo una immagine o entrambi.
Passando sopra alle immagini avendo impostato solo il selettore a:hover lo sfondo dell'immagine presente all'interno del tag 'a' cambia facendo un brutto effetto. Ho provato quindi come segue
a:hover { background-color: green}
a.img:hover { background-color: red}

ho messo red tanto per vedere, ma non funziona. avete una soluzione?
Grazie.

[NonCeLaFaccio+]

Ciao,
credo che la sintassi corretta sia senza il punto cioè

a img:hover { background-color: red}

però in questo modo dai uno sfondo alle immagini quando ci si passa sopra mentre se ho capito bene tu non vuoi darglielo

Potresti provare a racchiudere il testo dei link che non hanno immagini dentro un tag <span> e poi fare un css per l'hover del solo span:

<style type="text/css">
   a span:hover {
      background-color: red;
      }
</style>

....

solo immagine
[img]...[/img]

solo testo
<span>testo</span>

testo e immagine
[img]...[/img]testo e immagine

Può andare?

Ciao

[George_star]

così impegnato a cercare una soluzione che includesse una esclusione che bastava rigirare la cosa per risolvere

cmq solo per capire: a parte il fatto che ho scritto red per fare un esempio ma il formato a.imgver non dovrebbe dare ai tag img all'interno di un link il colore che dico??

[George_star]

cmq non mi funziona...

[NonCeLaFaccio+]

Il formato corretto è senza punto e con l'h (con i computer bisogna essere precisi):

a img:hover { ... }

e applica lo stile ai tag <img> contenuti all'interno di tag <a> al passaggio del mouse.

Il codice che ti ho postato l'ho testato su IE7 e su FF portable ma dovrebbe funzionare su tutti.

Ciao

[George_star]

però facendo così se passo sopra al testo del link mi cambia il colore anche sotto all'immagine mentre se vado solo sull'immagine che è nel link mi fa tutto verde e l'immagine rossa

<style type="text/css">
<!--
a:link { color: blue}
a img:hover { background-color: red}
a:hover { background-color: green}
-->
</style>

.....

[img]1.gif[/img]prova

[Mich_]

a:hover img { ... }

[NonCeLaFaccio+]

Il computer fa quello che gli dici di fare e il tuo codice gli dice di fare proprio quello che hai descritto.

Non capisco dove sia il problema, se gli dai uno stile a:hover questo verrà applicato a tutti i tag a, se non vuoi che questo accada non dargli quello stile. Mi sembra semplice.

[George_star]

...meglio ma mi appare sempre una righetta colorata sotto all'immagine che è quella che vorrei eliminare

[Mich_]

La "righetta" probabilmente e` l'effetto del border, che viene messo di default da quasi tutti i browser quando un'immagine si trova dentro un link.

Prova a definire:
a:hover img {
border: 0;
}