Question

我正在rails应用程序上创建一个ruby，我在一行中并排显示五个图像...当我将鼠标悬停在图像上时，我希望图像的宽度增加...现在宽度正在工作但是问题是当我将鼠标悬停在任何图像上时，最后一张图像转到另一边。我尝试了很多方法来添加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中设置动画）

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

z-index在jquery中不使用悬停宽度效果

2 个答案: