-1

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

6 回答 6

5

我不确定我明白你在问什么，但它会是这样的

.sm-ul li:hover .search-icon
{
    background-position: *position of hovered icones*
}
于 2013-08-06T08:42:11.683 回答
2

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

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

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

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

http://jsfiddle.net/6Y3mU/

于 2013-08-06T08:44:16.460 回答
0

方法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)
}
于 2013-08-06T08:43:21.077 回答
0

尝试这个： 

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
    }
于 2013-08-06T08:55:03.340 回答
0

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
于 2013-08-06T08:41:16.850 回答
0

也许如果你尝试给每个 <li> 元素一个 onmouseover 属性：

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

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

function setHoverIcon(i) {
    //Set the icon
}
于 2013-08-06T08:42:30.277 回答