javascript - 悬停列表项时更改div的背景图像

这是我的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;
}

最佳答案

尝试：

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

Demo

关于javascript - 悬停列表项时更改div的背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21079215/