如何使一个 div 覆盖不同行中的另一个 div

Question

Bootstrap框架和jQuery库被使用。

我在两个不同的 row 中有多个 div。当鼠标悬停时，我正在使用 jQuery 更改第一行的 div 高度。使用 z-index 和 绝对位置 中断 Bootstrap 响应。

使用 z-index 和 绝对位置 与 .col-xs-* 可以提供一个可行的解决方案。但是，结果并不适合移动设备。

现状

div.site-box-id-01和.site-row-id-01的身高同时变化

想要的结果

我不想改变整个 row 的高度，我希望第一个 div 在高度改变后覆盖第二个。我应该如何在不中断响应的情况下在 Bootstrap 中实现它。

 $(function() {
   console.log(">>> jQuery is ready");
   $(".site-box-id-01").mouseenter(function() {
     console.log(">>> mouse enter");
     $(this).stop(true, false).animate({
       height: "500px"
     }, {
       duration: 100
     });
   }).mouseleave(function() {
     console.log(">>> mouse leave");
     $(this).stop(true, false).animate({
       height: "300px"
     }, {
       duration: 100
     });
   });
 });

.site-box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: white;
}

.row {
  border: 1px dashed black;
  height: 301px;
  /*      fix row height*/
}

.site-row-id-01 {
  background-color: blanchedalmond;
}

.site-row-id-02 {
  background-color: azure;
}

.site-box-id-01 {
  position: absolute;
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Moving Box</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>



</head>

<body>
  <div class="container-fluid">
    <div class="row" id="site-row-id-01">
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 01</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 02</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 03</div>
      </div>
    </div>
    <div class="row row-class-02" id="site-row-id-02">
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 04</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 05</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 06</div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

对您的 CSS 进行一些更改：

.site-box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: white;
}
.row {
  border: 1px dashed black;
  height: 301px;
}
#site-row-id-01 {
  background-color: blanchedalmond;
}
#site-row-id-02 {
  background-color: azure;
}

#site-box-id-01 {
  position:absolute;
  z-index: 10;
}

绝对定位元素不会将其余内容向下推。另外 z-index 属性使其位于第二行的顶部。

参见Example A。

否则，在需要多个 div 的情况下，使用 jQuery .hover() 定位元素：

$(function() {
  $(".site-box").hover(function() {
    $(this).css('z-index', '1000');
    $(this).stop(true, false).animate({
      height: "500px"
    }, {
      duration: 100
    });

  }, function(){
    $(this).css('z-index', '0');
    $(this).stop(true, false).animate({
      height: "300px"
    }, {
      duration: 100
    });
  });
});

CSS也有一些变化，见Example B。

如果您将 width: 300px; 从 .site-box 更改为 width: 100% 并使用 .col-sm-4 .col-xs-12，它将看起来像您对移动设备的要求（调整浏览器大小以查看效果）。

参见Example C。

如何使一个 div 覆盖不同行中的另一个 div

How to make one div covering another div in different rows

css

twitter-bootstrap

twitter-bootstrap-3

现状

想要的结果