Html 我想要一个列表内的图像和一个锚定标签，以改变与css悬停

我试图将背景放在一个空的锚标记上，但除非我将文本放在那里，否则不会显示任何内容。使用css悬停时，在列表项中放置一个图像并将其更改为另一个图像的最佳方法是什么

html

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

---

默认情况下，锚定链接是内联元素，因此应用宽度和高度将不起作用。您可以使用CSS使其成为块元素：

ul li a.nav1 {
 display: block;
}

---

更多信息：

我需要将锚定标记更改为块级元素。现在一切都好了

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

---

也可以使用内联块。您应该使用图像精灵，而不是单独的图像：。否则，只有当用户第一次将鼠标悬停在元素上时，才会加载悬停图像。请记住，空格会影响内联块元素，因此，如果您通常将每个元素放在单独的行上，则必须折叠代码才能使其正确隔开。

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