z索引无法在jquery中使用悬停宽度效果

z-index not working with hover width effect in jquery

本文关键字：悬停 索引 jquery      更新时间：2023-09-26

我正在创建一个ruby on rails应用程序，我在一行中有一个五个并排的图像。。。当我悬停在图像上时，我希望图像的宽度增加。。。现在宽度可以工作了，但问题是当我悬停在任何图像上时，最后一个图像会移到另一边。。我尝试了很多方法来添加z索引，但都没有成功。。。尝试从脚本和css中添加z索引，使用相对位置和其他方法，但现在仍然有效这是我的家.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;
}

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中设置动画）

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

我把我的图像放在另一个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;
}
相关文章：