使用jquery從「堆棧」的底部到頂部帶來圖像

我有三個重疊的圖像。當光標移動到其中一個圖像上時，我希望圖像跳到堆棧的頂部。我試過兩種方法：CSS僞類：懸停和jQuery。使用jquery從「堆棧」的底部到頂部帶來圖像

$('.icon-stack').hover(function() { 
    var index = $(this).css("z-index"); 
    $(this).css('z-index',index+=3);}, 
function() { 
    var index = $(this).css("z-index"); 
    $(this).css('z-index',index-=3); 
});

要談論它多一點：當mouseenters底部圖像被撞達的z-index：4，然後回落到的z-index：1。中間圖像從2增加到5，最上面的圖像從z-index：3開始，因此當函數運行時，每個圖像都應該高於它。

我得到一些行爲：中間的圖像來到頂部，並留在上面。

來源

2013-11-22 icicleking

我完全誤讀了頁面上發生了什麼。該代碼確實按預期工作，我有一個圖像形狀問題，我沒有意識到。 – icicleking

然後刪除問題，謝謝。 – DaniP

@icicleking拋開形狀問題，你的代碼有時只是有點作品，看到我的答案。 –

沒有看到你的標記和CSS，很難說清楚，但我強烈懷疑問題是z-index被忽略，因爲默認定位一個元素static。你應該嘗試在你的CSS中設置position: relative這些元素。

來源

2013-11-22 19:09:31 marteljn

由於聲明「中間圖像位於頂部並保持最高位置」，因此情況並非如此。 –

$(this).css("z-index")返回一個字符串。所以"3" + 3 = 33等-=確實工作，因爲-沒有字符串的意義。使用parseInt。

$('.icon-stack').hover(function() { 
    var index = parseInt($(this).css("z-index"), 10); 
    $(this).css('z-index',index+3);}, 
function() { 
    var index = parseInt($(this).css("z-index"), 10); // not strictly necessary 
    $(this).css('z-index',index-3); 
});

我也去掉了=並提出它只是+和-作爲分配一塊是不必要的。

http://jsfiddle.net/7qGy5/

來源

2013-11-22 19:15:28

使用jquery從「堆棧」的底部到頂部帶來圖像

回答

相關問題