如何将缩小的宽度设置为div

Question

我有4个div左右浮动，有一组悬停宽度过渡，三个div的宽度相同但第四个较小。当你将鼠标悬停在div上时，它会变得更大，我需要其余部分自动将宽度减小到设置的缩小宽度值。

这是代码

.container1 {
 position: relative;
 height: 600px;
 width: 29%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container1:hover {
 width: 40%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container1 .reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: url("../img/bg1.jpg");
}

.container2 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
 }

 .container2:hover {
  width: 40%;
  transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  }
.container2 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image2 {
background: url("../img/bg2.jpg");
}

 .container3 {
 position: relative;
 height: 600px;
 width: 29%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 border-right: #000 4px solid;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container3:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image3 {
background: url("../img/bg3.jpg");
}
.container4 {
 position: relative;
 height: 600px;
 width: 13%;
 top: 0px;
 left:0%;
 z-index: 999;
 float: right;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; 
 }

.container4:hover  {
 width: 30%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }
 #image4 {
 background: url("../img/3.jpg");
 }

和HTML

   <div class="container1 animated bounceInLeft reduced-width" id="image1">         
   </div>
   <div class="container2 animated bounceInDown reduced-width" id="image2">
   </div>
   <div class="container3 animated bounceInDown reduced-width" id="image3">
   </div>
   <div class="container4 animated bounceInRight reduced-width" id="image4">
   </div>

Answer 1

• 当你定位2 classes时，你应该没有空格（就像你做.container1 .reduced-width它应该是.container1.reduced-width）

• 设置width，使您的设计不会中断..就像所有容器的宽度应为24%一样（因为您有4px个边框也是如此，总数将等于或小于100％。

• 您应该编写最少的css并定位更多元素。就像你每次定位一个特定的div一样，这是不可取的..你可以只使用一次减少类，并且每次都会设置大小。

• 这可能是您的缩减/优化代码：

HTML：

<div class="container animated bounceInLeft" id="image1"></div>
<div class="container animated bounceInDown" id="image2"></div>
<div class="container animated bounceInDown" id="image3"></div>
<div class="container animated bounceInRight" id="image4"></div>

CSS：

.container {
 position: relative;
 height: 600px;
 width: 24%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  background-color:red;
 }

.container:hover {
 width: 40%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container.reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}

#image2 {
background: yellow;
}

#image3 {
background: green;
}

 #image4 {
 background: blue  ;
 }

这是CodePen Link

Answer 2

你不需要做所有的事情来做你想做的事。你可以在没有任何Javascript或jQuery的情况下使用CSS3。

1. 将div包裹在容器中。
2. 为容器应用display: flex。
3. 将flex: 1 1应用于孩子。这很重要..不要给任何弹性基础..让它默认。
4. 向孩子们提供width: 100%;，他们会自动增长/缩小到可用空间。
5. 为flex: 1 1 <your-width>申请:hover个孩子。那就是它。

演示小提琴：http://jsfiddle.net/abhitalks/xghqmq6u/

请参阅此代码段：

＆＃13;
＆＃13;
.wrap {
    width: 100%;
    display: flex;
    flex-direction: columns;
}

.floaters {
    flex: 1 1 0%;
    height: 120px; width: 100%;
    transition: all 500ms;
}

.floaters:hover { flex: 1 1 50%;  }

.container1 { background-color: #f00;}
.container2 { background-color: #0f0;}
.container3 { background-color: #00f;}
.container4 { background-color: #ccc;}
＆＃13;
<div class="wrap">
    <div class="container1 floaters" id="image1"></div>
    <div class="container2 floaters" id="image2"></div>
    <div class="container3 floaters" id="image3"></div>
    <div class="container4 floaters" id="image4"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

编辑：现在第4列的宽度更小

以下是一个如何修复它的示例：http://jsfiddle.net/intergalactic_overlords/0hLmrme4/

Html需要一个包装器。当悬停包装器时，子（容器）宽度设置为20％。悬停特定容器时，其宽度设置为40％。

<div class="container-wrap">
   <div class="container container1 animated bounceInLeft reduced-width" id="image1">         
   </div>
   <div class="container container2 animated bounceInDown reduced-width" id="image2">
   </div>
   <div class="container container3 animated bounceInDown reduced-width" id="image3">
   </div>
   <div class="container container4 animated bounceInRight reduced-width" id="image4">
   </div>
</div>

CSS：

.container {
   background:snow;
   box-sizing:border-box;
   position: relative;
   height: 600px;
   width: 23%;
   float: left;
   z-index: 99;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-right: #000 4px solid;
   transition: all 300ms ease-in-out;
   -o-transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -webkit-transition: all 300ms ease-in-out;
}
.container-4 {
   width: 21%;
}

.container-wrap:hover > div {
    width: 21%;
}
.container-wrap:hover > .container4 {
    width: 16%;
}
.container-wrap > .container:hover {
    background: yellow;
    width: 42%;
    transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
 }
.container-wrap > .container4:hover {
    background: yellow;
    width: 37%;
    transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
 }

Answer 4

这是你如何解决它。

HTML（您不需要包装器）

<div class="container1 animated bounceInLeft" id="image1"></div>
<div class="container2 animated bounceInDown" id="image2"></div>
<div class="container3 animated bounceInDown" id="image3"></div>
<div class="container4 animated bounceInRight" id="image4"></div> 

CSS

    .container {
 position: relative;
 height: 600px;
 width: 24%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  background-color:red;
 }

.container:hover {
 width: 35%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container.reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}

#image2 {
background: yellow;
}

#image3 {
background: green;
}

 #image4 {
 background: blue  ;
 }

当然你需要Javascript（这里是Jquery）

   $('.animated').mouseenter(function(){
  console.log('here');
  $(this).removeClass('reduced-width').siblings('.animated').addClass('reduced-width');
}).mouseout(function(){
  $('.animated').removeClass('reduced-width');
});