Visualizzazione risultati 1 fino 9 di 9

Discussione: [CSS] a:hover img

  1. #1
    Guest

    Unhappy [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!

    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...

  2. #2
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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

  3. #3
    Guest

    Predefinito

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

  4. #4
    Guest

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    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
    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 Visualizza messaggio
    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...
    Ultima modifica di musicanapoli : 20-03-2009 alle ore 20.19.52

  5. #5
    Guest

    Predefinito

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

  6. #6
    Guest

    Predefinito

    Citazione Originalmente inviato da sIM Visualizza messaggio
    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...
    Ultima modifica di musicanapoli : 20-03-2009 alle ore 20.18.06

  7. #7
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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; }

  8. #8
    Guest

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    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.

  9. #9
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •