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

【问题标题】：z-index not working with hover width effect in jqueryz-index 不适用于 jquery 中的悬停宽度效果
【发布时间】：2016-07-29 02:06:06
【问题描述】：

我正在创建一个 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;
}

【问题讨论】：

当然！！ 5 *20% = 100% 或 4*20% + 25% = 105% 这意味着最后一个空间太小了！
是的，我知道，但我希望悬停图像的 z-index 高于其他图像..
为什么要更高的z-index在这种情况下是没用的！
我尝试将其他 4 张图像设为 18.75%，但它会出现一些问题，因为图像转到下一行，然后又回到同一行。所以使用 z-index 更好悬停图像将高于其他图像
等到所有 4 个图像动画完成，然后将宽度分配给最后一个！这样最后一张图片就不会跳到下一行了！

标签： javascript jquery css ruby-on-rails z-index

【解决方案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。 :hover 在您将鼠标悬停在 html 对象上时起作用（transition: 0.25s; 在 CSS 中设置动画）

【讨论】：

拜托！这不是 OP 问题的答案！也许是评论！
@4lackof 同样的问题...最后一张图片转到下一行..!!
嗨无论如何我解决了它并把它放在上面......你的提示也帮助我找到问题所以谢谢......我添加了一些 div 和一些 css 代码（包括一些你的建议) 现在可以使用了..

【解决方案2】：

我刚刚解决了我的问题，想把它放在这里给任何有同样问题的人..

我将我的图像放在另一个 div 中并添加一些 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;
}

【讨论】：