在悬停列表项目时更改div的背景图像

Question

这是我的 html ：

<li><a href=""><div class="arrow"></div>List Item</a></li>

如何在用鼠标悬停“列表项”的同时更改“箭头”类的背景图像？ 类箭头只是一个位于每个列表项前面的导航图像。

这是我的 css ：

.arrow {
background: transparent url('../images/arrow.png') center center no-repeat;
width:16px;
height:16px;
float: left;
padding:0;
margin-right:1em;
}

.arrow:hover {
background: transparent url('../images/arrow_hover.png') center center no-repeat;
}

Answer 1

尝试：

li:hover .arrow {
    background: transparent url('../favicon.png') center center no-repeat;
}

Demo