Question

我有一个小问题。

当然，我有这样的结构（在整页中运行）

＆＃13;

.color{
    background : red;
}

.color-green{
    background : green;
}

.vertical-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<body>
  <div class="container-fluid color-green vertical-align">
    <div class="row">
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
    </div>
  </div>
</body>

＆＃13;

我想像这样独立悬停div

但是我使用bootstrap，而且我不知道如何使用bootstrap来实现它..

如果您有想法或跟踪

感谢

Answer 1

在:hover上

，您可以使用transform: scale()使元素更大，更改background，然后添加position: relative; z-index: 1;以使该元素位于其兄弟之上。如果您愿意，可以使用transition创建平滑过渡。

.color{
    background : red;
}

.color-green{
    background : green;
}

.vertical-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.color-green > .row > .text-center {
  transition: transform .25s, background .25s;
}
.color-green > .row > .text-center:hover {
  transform: scale(1.2);
  background: #8dc63f;
  position: relative;
  z-index: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<body>
  <div class="container-fluid color-green vertical-align">
    <div class="row">
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
    </div>
  </div>
</body>

使用bootstrap在悬停时展开div

1 个答案: