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*
}

Answer 2

如果我已正确理解您的问题，您希望悬停效果由li元素触发，但是应用于该li中的span元素？

如果是这样，你可以这样做：

.sm-ul li:hover .search-icon{background:url(../img/icons/search_hover.png) 0px -39px;}

这意味着悬停在li上，但效果发生在其子元素上。在这里看到它：

http://jsfiddle.net/6Y3mU/

Answer 3

<强> 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>

<强> JAVASCRIPT

$('li').mouseover(
     function(){
          var itemClass = $(this).find('span').attr('class');
      }
);
//And based on item's class you have in var itemClass you can do whatever you want

Answer 4

也许如果你尝试给每个＆lt; li＆gt; element一个onmouseover属性：

<li onmouseover="setHoverIcon(2)">List item 3</li>

其中2对应于图标（可以是任何数字。在javascript中，您可以写：

function setHoverIcon(i) {
    //Set the icon
}

Answer 5

方法1：Jquery：

$("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

方法2：css：

li .search-icon:hover {
//change background(make icon as background image)
}

Answer 6

试试这个：

ul.sm-ul li span{
        background-image: url("YOUR sprite image url");
        background-repeat: no-repeat;
        display: block;
    }  
div.short-menu ul.sm-ul li span.search-icon:hover{
        background-position: -197px -44px; // change this position as per your img
    }
div.short-menu ul.sm-ul li span.search-icon {
        background-position: -197px 0; // change this position as per your img
    }

悬停列表时更改图标

6 个答案: