HTML: rimuovere a: hover per le immagini?

Question

Per i collegamenti testo , ho:

CSS:

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

Ma questo aggiunge anche una sottolineatura nera sui IMG collegabili che non voglio.

Come rimuovo il border-bottom su IMG collegabili quando ho il mouse su CSS?

Ho provato quanto segue:

a:hover img {border-bottom: 0px}

Ma questo non funziona

Esempio live (prova a passare il mouse sopra il logo in alto -sinistra)

Answer 1

Se galleggi le tue immagini rispetto a quelle in linea, funzionerà e non richiederà alcuna modifica agli attributi di collegamento delle immagini richiesti dalla risposta di Steve.

a:hover img {
border: none !important;
display: block;
}

Answer 2

a:hover img {border-bottom: 0px;}

Questo dovrebbe fare il trucco.

Answer 3

Non sono sicuro che questa sia la soluzione migliore, ma funziona:

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

Quindi imposta le ancore con le immagini in esse su " aimg " classe:

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Answer 4

questo ha funzionato anche per me in IE. IE ha mostrato i bordi ma con questo non lo fa più.

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Answer 5

Ho trovato questo esempio qui: https://perishablepress.com/ CSS-remove-link-sottolineature-borders--immagini collegate /

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

Suppongo che sia esattamente quello che vuoi.
Funziona perfettamente in Firefox, rimuove tutti gli effetti dal collegamento, che contiene un'immagine di determinati formati.

Answer 6

Ho usato jQuery per aggiungere un " no-hover " classe a tutti i tag che contengono un'immagine:

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

E nei CSS ho fatto questo:

a.no-hover:hover {
  border-bottom: 0px
}

Se jQuery è troppo pesante per te, puoi utilizzare picoQuery . È solo 1k, se solo scegli il metodo .each ().

Answer 7

Hai provato a img {border: none} ?