懸停時淡入/淡出標籤

Question

我有幾個帶標籤的區域。當我將鼠標懸停在某個區域時，我想將該區域中的標籤顏色更改爲更突出，並淡化我未懸停的區域中的其他標籤。

我怎麼做掉呢？

$("li").hover(function(){ 
    $(this).find(".label").fadeOut(100); 
}); 

Answer 1

您應該將兩個函數傳遞給.hover。所述第一個將被用作回調鼠標放置，第二個到鼠標移開：

$("li").hover(
    function(){ 
     $(this).find(".label").fadeOut(100); 
    }, 
    function(){ 
     $(this).find(".label").fadeIn(100); 
    } 
); 

Answer 2

$("li").hover(
    function() { 
    // hover active 
    }, 
    function() { 
    // hover deactive 
    } 
); 

Answer 3

通常你傳遞兩個函數成.hover()。第一個是mouseover函數，第二個是mouseout函數。

JS -

$("li").hover(
    function() { 
     $(this).find("label").stop().fadeTo(100, 1); 
    }, 
    function() { 
     $(this).find("label").stop().fadeTo(100, 0); 
    } 
); 

CSS -

label { 
    opacity : 0; 
    filter : alpha(opacity=0); 
}​ 

的.stop()將允許用戶快速鼠標懸停再出來和動畫雖然不會跑老遠，創建一組動畫，如果用戶鼠標快速移出一堆。我將.fadeTo()與.stop()一起使用，因爲如果使用.fadeOut()/.fadeIn()，則當用戶鼠標快速翻出時，動畫可能會中斷。

.fadeTo()的另一個優點是我們只對元素的opacity進行動畫處理，所以元素仍然保留其在屏幕上的位置（即元素不會跳來跳去）。

這裏是一個演示：http://jsfiddle.net/jasper/ExWQp/

文檔爲.hover()：http://api.jquery.com/hover

Answer 4

我創造了這個例子給你。 它使用無序列表，與<跨度>標籤內，這是輸入/輸出褪色。

<ul> 
    <li><span>1st.</span> list item</li> 
    <li><span>2nd.</span> list item</li> 
    <li><span>3dr.</span> list item</li> 
    <li><span>4th.</span> list item</li> 
    <li><span>5th.</span> list item</li> 
    <li><span>6th.</span> list item</li> 
    <li><span>7th.</span> list item</li> 
</ul>​ 

 

$('li').mouseenter(function(){ 
    $('span', this).stop().animate({opacity:1}, 150) 
    $('span', $(this).siblings('li')).stop().animate({opacity:0.3}, 150) 
}) 

當你懸停 Li元素，孩子跨度被褪到100％，兒童跨越同級的LIS變淡，至50％;

$('ul').mouseleave(function(){ 
    $('span', this).animate({opacity: 1}, 150); 
})​ 

當你離開父母UL元素，所有跨度元素還原回，動畫100％;

這裏是工作示例的這一... http://jsfiddle.net/HBj4F/