[CSS] a:hover img

Ciao a tutti...
Sto cercando di togliere quel fastidioso hover alle immagini, in pratica io ho una cosa del genere per quanto riguarda i link:

Codice:

---

a: hover {
color: blabla;
background: blue;
}

---

E quindi per togliere il background quando si passa sopra l'immagine linkata:

Codice:

---

a:hover img{
background:none;
border: 0px;
}

---

Ovviamente non funziona, se no non sarei qui!:lol:

Poi ho provato a dare all'immagine una classe, come suggerito dalle ricerche sul web:

Codice:

---

<a href="#" class="noborder"><img src="/blabla.gif"><a>

---

e successivamente al CSS:

Codice:

---

.noborder {
background: none;
border: 0;
}

---

Niente da fare...

non ho capito bene cosa intendi per "hover delle immagini". Il bordo che si vede su IE? Per quello, non basterebbe

Codice:

---

img { border: 0; }

---

nel primo spezzone di codice, occhio che a: hover non è lo stesso di a:hover (lo spazio!)

Magari metti su una pagina di prova dove si veda il problema, e nel frattempo dai un'occhiata a questi due esempi, che magari non c'entrano, ma non si sa mai :wink:

Il problema è che IE non supporta il PNG ...quindi vedrai uno sfondo sul grigio..per questo esistono gli appositi JS! ;)

Citazione:

---

Originalmente inviato da dreadnaut

non ho capito bene cosa intendi per "hover delle immagini". Il bordo che si vede su IE? Per quello, non basterebbe

Codice:

---

img { border: 0; }

---

nel primo spezzone di codice, occhio che a: hover non è lo stesso di a:hover (lo spazio!)

Magari metti su una pagina di prova dove si veda il problema, e nel frattempo dai un'occhiata a questi due esempi, che magari non c'entrano, ma non si sa mai :wink:

---

Dunque...
accedendo al mio sito MusicaNapoli si vede nella sidebar a destra un'immagine con scritto "Fai delle ricerche"...l'immagine in questione è racchiusa in un link:

Codice:

---

<a href="#" onclick="return mostraMenu('menu3')"  title="Effettua delle richieste"><img src="/imm/rich.gif"></a>

---

Passando il mouse sopra quest'immagine, sia con Firefox che con IE, si vede un background, ovvero un colore bluetto.
Questo background bluetto è dato dal fatto che nel CSS degli hiperlinks ho questo:

Codice:

---

/* Hiperlinks */
a:link        {
        text-decoration: none;
        color: #1f86a7;
}
a:active {
        text-decoration: none;
        color: #1f86a7;
}
a:visited {
        text-decoration: none;
        color: #1f86a7;
}
a:hover {
        text-decoration: overline;
        color: white;
        background: #1f86a7;
}

---

In particolare questo:

Codice:

---

a:hover {
background: #1f86a7; (il bluetto di cui vi parlavo prima)
}

---

Con questo css, il miei link sono di colore #1f86a7, ma quando passo sopra il link avrò il colore white con un background #1f86a7(bluetto!).
Ora, questo background si ripercuote sull'immagine linkata, così quando passo il mouse sopra l'immagine, essa ha un background bluetto così come accade ai miei link quando passo su il mouse.
In pratica è come se avessi (ma non ho):

Codice:

---

a:hover img{
background: #1f86a7;
}

---

Grazie comunque degli esempi.

Citazione:

---

Originalmente inviato da sIM

Il problema è che IE non supporta il PNG ...quindi vedrai uno sfondo sul grigio..per questo esistono gli appositi JS! ;)

---

Non è un problema solo di IE ma anche Firefox...

Ma che cosa dici? Firefox le PNG le supporta e come! XD

Citazione:

---

Originalmente inviato da sIM

Ma che cosa dici? Firefox le PNG le supporta e come! XD

---

Io non ho detto questo...Ho detto che il problema che si presenta sul mio sito è uguale sia su Firefox che su IE. Mi sono espressa male.

Edit.
Non vedo uno sfondo grigio...

Da qualche parte nel tuo css c'è una regola che setta il background dei link on hover. Questa ha effetto anche se c'è un'immagine e basta, e quindi dietro di essa vedi una barra del colore del background, alta quanto il font.

forza il background ad essere vuoto con

Codice:

---

.noborder { background: none !important; }

---

Citazione:

---

Originalmente inviato da dreadnaut

Da qualche parte nel tuo css c'è una regola che setta il background dei link on hover. Questa ha effetto anche se c'è un'immagine e basta, e quindi dietro di essa vedi una barra del colore del background, alta quanto il font.

forza il background ad essere vuoto con

Codice:

---

.noborder { background: none !important; }

---

---

Avevo già messo questo, ma senza !important
Ok molto gentile, adesso funziona, grazie.

important serve perché c'è un'altra regola più specifica che ha priorità su questa. se cambi .noborder in qualcosa tipo A.noborder IMG, in modo da aumentare la sua priorità, potrebbe non essere più necessario