javascript - z-index 不适用于 jquery 中的悬停宽度效果

Question

我正在创建一个 ruby​​ on rails 应用程序，我有五个图像并排排成一行......我希望当我将鼠标悬停在图像上时图像的宽度增加......现在宽度正在工作但是问题是当我将鼠标悬停在任何图像上时，最后一张图像会转到另一边。我尝试了很多方法来添加 z-index 但徒劳无功...... 尝试从脚本和具有相对位置的 css 添加 z-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 仅适用于具有 position 样式的元素，即 position: relative; position: absolute; 等

添加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;
}

您不需要为此使用 JS。当您将鼠标悬停在 html 对象上时，:hover 起作用(transition: 0.25s; 在 CSS 中设置动画)