z-index가 joverery에서 호버 너비 효과로 작동하지 않습니다.

Question

레일 앱에 루비를 만들고 5 개의 이미지가 한 줄에 나란히 표시됩니다. 마우스를 올려 놓으면 이미지의 너비가 증가합니다. 이미지 ... 이제 너비가 작동하지만 문제는 마지막 이미지가 다른 이미지로 이동했을 때입니다. 나는 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/SCS들 파일입니다

@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- 인덱스는

가 position: relative;이를 위해 JS를 사용할 필요가 없습니다

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

.this에 추가 즉 position: relative; position: absolute; 등 position 스타일이 요소와 함께 작동합니다. :hover 작품 당신이 HTML 개체 이상 (transition: 0.25s; 세트 CSS에 애니메이션을) 가져 가면

Answer 2

난 그냥 내 문제를 해결하고 같은 문제가 누군가를 위해 여기를 데려 가고 싶다는에 ..

나는 안에 내 이미지를 넣습니다 다른 사업부와 일부 CSS (일부 CSS는이 질문에 날 도와 시도들에서 그것을 얻을)를 추가는 ... 여기 내 코드의 업데이트

home.html.erb :

<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> 

과 여기 내 CSS/scss (아래 CSS 코드의 주석을 제거하고 홈페이지에서 js를 삭제하여 CSS 방법을 사용할 수도 있습니다) :

@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; 
}