如何不换列，以便当我将鼠标悬停在第一列上时，最后一列又显示出容器的一半？

时间：2019-02-22 09:16:35

标签： html css css3 flexbox bootstrap-4

如何不换列，以便当我将鼠标悬停在第一列上时，最后一列又显示出容器的一半？

我试图做到这一点，以便当我将鼠标悬停在box-hover类列上时，它将在我的列中将25%设置为flex: 0 0 50%;。这工作正常，但最后一列自动换行。

我想要它，以便当我将鼠标悬停在box-hover上时，最后一列将显示在容器之外，而最后一列将显示一半且隐藏一半。

我已附上我要完成的任务的图片。预先感谢。

我想要：

enter image description here

我的代码：

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

3 个答案:

答案 0 :(得分：1)

您可能会为悬停的最后一列考虑负边距并隐藏溢出：

.container {
  overflow:hidden;
}
 
.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child  {
  transition: margin 0s 0.5s; /*remove margin when the hover ends*/
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
  transition: margin 0s; /*add margin immediately on hover*/
 }
 /**/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

另一种想法是考虑内部负边距并减小元素的宽度以隐藏元素的一半：

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
  margin-right:0;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child,
 .col-md-3:last-child .box{
  transition: 0s 0.5s;
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
   flex-basis:12.5%!important;
   overflow:hidden;
  transition: 0s; 
 }
 .box-hover:hover ~.col-md-3:last-child .box {
   margin-right:-100%;
   transition: 0s;
 }
 /**/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

答案 1 :(得分：1)

默认的“ row”类具有flex-wrap：wrap，仅将“ flex-nowrap”类与行一起使用，并且不会将您的盒子包装到下一行。希望对您有帮助

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row flex-md-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

答案 2 :(得分：1)

此处您可以将 flex-nowrap用于row ，并且当悬停时要比递减的兄弟姐妹 div宽度并添加 overflow：hidden到parent 

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.container.overhidden{
  overflow:hidden;
  padding:0px 55px;
  max-width:1280px;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container overhidden">
    <div class="row flex-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

相关问题
最新问题