Voglio un'immagine all'interno di un elenco e un tag di ancoraggio per cambiare il mouse con CSS

Question

Sto cercando di mettere uno sfondo a un tag di ancoraggio vuoto, ma nulla verrà visualizzato a meno che non possa il testo lì.Qual è il miglior approccio per avere un'immagine in un elemento di elenco e cambiarlo su un'altra immagine su Gover con CSS.

HTML

<ul>
    <li><a class="nav1" href="http://localhost:8888/fiftyfity/?page_id=2"></a></li>
</ul>

.

CSS

   ul li a.nav1{
    background-image: url("../images/nav1.gif");
    width:161px;
    height: 49px;
}
ul li a.nav1:hover{
    background-image: url("../images/navB1.gif");
    width:100px;
    height: 20px;
}

.

Answer 1

I collegamenti di ancoraggio sono elementi in linea per impostazione predefinita, quindi applicare una larghezza e un'altezza non funzionerà.Puoi farli bloccare elementi con CSS:

ul li a.nav1 {
 display: block;
}

.

Maggiori informazioni: http://www.webdesignfromscratch.com/HTML-CSS / CSS-Block-and-Inline /

Answer 2

Avevo bisogno di cambiare il tag di ancoraggio in un elemento a livello di blocco.Tutto funziona ora

  ul li a.nav1{
    display:block;
    background-image: url("../images/nav1.gif");
    width:161px;
    height: 49px;
}
ul li a.nav1:hover{
    display:block;
    background-image: url("../images/navB1.gif");
    width:100px;
    height: 20px;
}

.