マウスオーバーで他の画像の上に画像を配置するにはどうすればよいですか？

Question

解決策を見つけようとしましたが、見つけられませんでした。 私はいくつかの画像を持っています。私は最初の画像をマウスオーバーすると、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

あなたはoverとoutハンドラでjQueryのhoverイベント機能を使用することができます。..

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>