javascript - 悬停列表项时更改 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