悬停列表时更改图标

Question

我有一个项目/菜单列表,当我悬停列表(li)时,我希望图标根据我徘徊的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*
}