jquery - 悬停列表时更改图标

Question

我有一个元素/菜单列表，当我悬停列表 (li) 时，我希望图标根据我悬停的 li 来改变。我怎样才能做到这一点？悬停图标范围将使用 Sprite 更改图像。但我想在将它们悬停在各自的 li 上时更改它。请需要一些想法!

html在下面

<div class="short-menu">
   <ul class="sm-ul">
        <li><span class="search-icon"></span><span>Search</span></li>
        <li><span class="setting-icon"></span><span>settings</span></li>
    </ul>
</div>

CSS

/* list icons */
.search-ico { width:40px; height:40px; display:block; background:url(../img/icons/search.png) 0px 0px;}
.search-ico:hover { background:url(../img/icons/search.png) 0px -39px;}

Answer 1

我不确定我是否明白你的意思，但应该是这样的

.sm-ul li:hover .search-icon
{
    background-position: *position of hovered icones*
}