html - 我希望列表中的图像和锚标记在悬停时使用 css 进行更改

Question

我正在尝试为空的锚标记添加背景，但除非我在其中放置文本，否则不会显示任何内容。在列表项中放置图像并将其更改为使用 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

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

ul li a.nav1 {
 display: block;
}

更多信息：http ://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Answer 2

我需要将锚标记更改为块级元素。现在一切正常

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