如何將鼠標懸停在其他圖像上方的圖像？

Question

我試圖找到任何解決方案，但我coudn't找到。 我有一些圖像，每個人都在另一個。我希望，當我把鼠標懸停在第一張圖片上，behnd的圖像將會在第一張圖片上方。 例如：

正常： 鼠標懸停：

在基本的第二和第三圖像是第一圖像的後面。 對不起，我的英語，並提前致謝！

Answer 1

該解決方案需要這些箱子的絕對定位和在容器中。

var prop = "bottom", 
 
    moveAmount = 50; 
 

 
$('.container').hover(
 
    function() { 
 
    var moved = $(this).find(".box"); 
 

 
    for (var i = (moved.length - 1), pad = 0; i >= 0; i--) { 
 
     $(moved[i]).css(prop, (pad++ * moveAmount) + "px"); 
 
    } 
 
    }, 
 
    function() { 
 
    var moved = $(this).find(".box"); 
 
    
 
    for (var i = 0; i < moved.length; i++) { 
 
     $(moved[i]).css(prop, "0px"); 
 
    } 
 
    } 
 
);

.container { 
 
    background-color: #eeeeee; 
 
    position: relative; 
 
    width: 45px; 
 
    height: 45px; 
 
} 
 

 
.box { 
 
    background: red; 
 
    width: 40px; 
 
    height: 40px; 
 

 
    transition: bottom 0.3s ease-in-out; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<br><br><br><br><br><br> 
 

 
<div class="container"> 
 
    <div class="box">3</div> 
 
    <div class="box">2</div> 
 
    <div class="box">1</div> 
 
</div>

Answer 2

您可以使用jQuery的hover事件函數與over和out處理..

1. 與那些「落後」的第一箱箱開始 - 隱藏它們。
2. 接下來定義一個onhover事件以在鼠標懸停時顯示它們，並在鼠標懸停時再次隱藏它們。

$('#1').hover(
 
    function(){ 
 
    $('.hidden').removeClass('hidden').addClass('visible'); 
 
    }, 
 
    function(){ 
 
    $('.visible').removeClass('visible').addClass('hidden'); 
 
    } 
 
)

.box { 
 
    border: solid 2px black; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
.hidden { 
 
    visibility: hidden; 
 
} 
 

 
.visible { 
 
    visibility: default; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="3" class="box hidden">3</div> 
 
<div id="2" class="box hidden">2</div> 
 
<div id="1" class="box">1</div>