當懸停列表更改圖標

我有一個項目/菜單列表，當我懸停列表（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;}

來源

2013-08-06 Wang' l Pakhrin

請分享CSS定義也 –

請分享你的代碼中已經嘗試了什麼？ –

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-06 08:41:16

我不知道我明白你問什麼，但它是類似的東西

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

來源

2013-08-06 08:42:11

也許你試着給每個<李>元素的屬性的onmouseover：

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

其中2對應於圖標（可以是任何數字。在JavaScript中，你可以寫：

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

來源

2013-08-06 08:42:30 lukey

方法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-06 08:43:21

如果我理解正確你的問題，你想要的懸停效果由li元素觸發，但應用於該li內的span元素？

如果是的話，你可以這樣做：

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

這意味着懸停是跨立，但效果發生的子元素。看到它在這裏的行動：

http://jsfiddle.net/6Y3mU/

來源

2013-08-06 08:44:16 Flam

試試這個：

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-06 08:55:03

當懸停列表更改圖標

回答

相關問題