Я хочу, чтобы изображение внутри списка и тег привязки менялись при наведении курсора 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;
}