jqueryでz-indexがホバリング幅の効果で動作しない

Question

私はレールアプリケーションでルビーを作成していますが、私は5行のイメージを1行に並べています...私が上に移動するとイメージの幅を広げたいイメージ...幅が問題なく動作していますが、画像にカーソルを置いたときに最後の画像が別の場所に移動する問題があります。Zインデックスを追加するために多くの方法を試しましたが、無駄にしています... zを追加してみてくださいスクリプトからとCSSからの相対位置と、いくつかのより多くの方法が、それでも今ここ を働いて-indexは私home.html.erbです：

<div class="container-fluid" id="width-r"> 
    <%= image_tag("wood1.jpg",class: "this h-h") %> 
    <%= image_tag("wood2.jpg",class: "this") %> 
    <%= image_tag("wood3.jpg",class: "this") %> 
    <%= image_tag("wood4.jpg",class: "this") %> 
    <%= image_tag("wood5.jpg",class: "this") %> 
</div> 
<div class="jumbotron"> 
    <h1 align="center"> Here comes the ads</h1> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".this").mouseover(function(){ 
     $(this).animate({width: "25%"},"fast"); 
    }); 
    $(".this").mouseout(function(){ 
     $(this).animate({width: "20%"},"fast"); 
    }); 
    }); 
</script> 

とここに私のCSS/SCSSファイルです：

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

.navbar { 
    background-color: #fff; 
} 

body { 
    height: 100%; 
} 
.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
} 



.navbar-ma { 
    /* remove space between the navbar and the images below */ 
    margin-bottom: 0px; 
} 

.jumbotron { 
    height: 220px; 
    margin-bottom: 0px; 
} 

.container-fluid { 
    padding: 0px; 
} 

Answer 1

のz-indexが唯一のあなたは、このためにJSを使用する必要はありませんposition: relative;

.thisから

.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
    position: relative; 
    z-index: 0; 
    transition: 0.25s; 
} 
.this:hover{ 
    width: 25%; 
    z-index: 1; 
} 

を追加positionスタイル、すなわちposition: relative; position: absolute;など

を持つ要素で動作します。私はちょうど私が内側に自分の画像を置く。..

を私の問題を解決し、同じ問題を抱えている人のためにそれをここに入れたいあなたはHTMLオブジェクトの上にカーソルを置く:hover作品（transition: 0.25s;はCSSでアニメーションを設定します）

Answer 2

<div class="container-fluid" id="width-r"> 
    <div class="this"> 
    <%= image_tag("wood1.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood2.jpg",class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood3.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood4.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood5.jpg", class: "inside") %> 
    </div> 

</div> 
<div class="jumbotron"> 
<h1 align="center"> Here come the ads</h1> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".inside").mouseover(function(){ 
     $(this).css('z-index', '100'); 
     $(this).animate({width: "105%"},"slow"); 
     }); 
     $(".inside").mouseout(function(){ 
     $(this).css("z-index", ''); 
     $(this).animate({width: "100%"},"slow"); 
     }); 
    }); 
</script> 

：別のdivと（一部のCSSはこの質問で私を助けようとした男たちからそれを得る）、いくつかのCSSを追加... ここでは私のコードのアップデート

home.html.erbですそしてここでは私のCSS/scssです（CSSのコードのコメントを外してjssをホームページから削除することもできます）：

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

.navbar { 
    background-color: #fff; 
} 

body { 
    height: 100%; 
} 

.width-r { 
    position: relative; 
} 

.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
    position: relative; 

} 
.inside { 
    width: 100%; 

    float: left; 
    height: 581.55px; 
    position: absolute; 
    transition: 0.5s; 
} 
/* 
.inside:hover { 

    z-index:100; 
    width: 110%; 
} 
*/ 
.navbar-ma { 
    /* remove space between the navbar and the images below */ 
    margin-bottom: 0px; 
} 

.jumbotron { 
    height: 220px; 
    margin-bottom: 0px; 
    z-index: 0; 
} 

.container-fluid { 
    padding: 0px; 
}