Question

已使用

Bootstrap 框架和 jQuery 库。

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

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

现状

div .site-box-id-01和.site-row-id-01的高度同时发生变化。

enter image description here

期望的结果

我希望第一个row覆盖高度变化后的第二个div，而不是更改整个$(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 }); }); });的高度。我应该如何在没有中断响应的情况下在Bootstrap中实现它。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

{{1}}

＆＃13;

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

现状

期望的结果

1 个答案: