IE non aver rispettato: hover sull'elemento

Question

lavoro sul seguente sito internet: http://cetcolor.com

La grafica testa d'albero con il "letto in proposito" tasto ha un link posizionato con hover che quando rotolato sopra visualizza un grafico pulsante arancione ed è un link cliccabile.

Tuttavia, nei browser IE non funziona.

Ecco il codice HTML interessata:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div> 

E qui è il CSS di riferimento:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
} 

Qualcuno ha qualche idea del perché il passaggio del mouse non funziona nei browser IE?

Answer 1

Ho una soluzione per voi. Basta definire un colore di sfondo o un'immagine di sfondo per la tua classe read_about_it.

C'è un errore logico evidente nel codice CSS/o in IE - dipende dal punto di vista. Il tuo tag A è vuoto - non intendo il testo ma lo sfondo (cambi lo sfondo sullo stato del tuo hover). Sappiamo tutti che IE vive nel suo mondo e gestisce l'HTML in modo diverso perché utilizza l'antico motore Trident. Tuttavia, IE non cambierà lo sfondo sullo stato di hover se l'elemento è vuoto (non ha sfondo) perché IE presuppone che non sia necessario modificare o creare qualcosa che non esiste già.
Cheers!

Answer 2

Se si utilizza IE6 non supporta: hover su tutti gli elementi ad eccezione

<a> 

ho ottenuto intorno esso utilizzando JavaScript

onmouseover 
onmouseout 

eventi.

Answer 3

Aggiungi "display: block;" ad esso, e dovrebbe funzionare per voi.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

Answer 4

ho hanno lo stesso problema e ho risolvere questo problema con:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

Il "background: RGBA (255, 255, 255, 0)" è una parola chiave per risolvere questo problema. Ma tu vuoi IE-7 O più vecchio puoi inserire background-image: url (URL_TO_TRANSPARENT_IMAGE).