html - 在悬停 CSS 上调整 Div 大小

Question

我有两个与 iframe 并排的 div。当我将鼠标悬停在左侧的 div 上时，我希望右侧的 iframe 调整为 50% 宽度。左边的 div 将被调整为 50%。我更喜欢纯 CSS 方法。

.answer6{
    float:left;
    width: 100%;
}

.mpi-options-all2 {
  float: left;
  width: 100%;
  bottom: 75px;
  right: 75px;
  padding: 10px;
  background-color: black;
  color: white;  
    opacity:0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    font-weight: bold;
    text-align: left;
    padding: 10px;
    position: absolute;
    right: -100%;
	text-align: center;
    top: 0px;
    height: 505px;
    z-index: 2;
    -webkit-transition: right 0.5s ease-in-out;
    -moz-transition: right 0.5s ease-in-out;
    -o-transition: right 0.5s ease-in-out;
    -ms-transition: right 0.5s ease-in-out;
    transition: right 0.5s ease-in-out;
}

.left-right{
    padding: 0px;
    margin: 0px auto;
    height: 525px;
    position: relative;
    overflow: hidden;
}

.left-right:hover .mpi-options-all2{
    right: 0;
}

<div class="answer6">
  <iframe src="https://wikipedia.org/wiki/Main_Page" width="75%" height="500" align="right"></iframe>
  <div class ="left-right">
    <div class="mpi-options-all2">
    <h2><center>Description:</center></h2>
    </div>
  </div>    
</div>

Answer 1

根据我对问题的理解，这里给出一个解决方案，看看是否正确。

<div class="answer6">
      <div class ="left-right">
        <div class="mpi-options-all2">
        <h2><center>Description:</center></h2>
        </div>
      </div>
      <iframe src="https://wikipedia.org/wiki/Main_Page" height="500" align="right"></iframe>      
    </div>

---

.answer6{
    width: 100%;
}
.mpi-options-all2 h2{
  display: none;
}

.mpi-options-all2 {
  width: 100%;
  bottom: 75px;
  /*right: 75px;*/
  padding: 10px;
  background-color: black;
  color: white;  
    opacity:0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    font-weight: bold;
    text-align: left;
    padding: 10px;
    /*position: absolute;*/
    /*right: -100%;*/
    text-align: center;
    top: 0px;
    height: 505px;
    /*z-index: 2;*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.left-right{
    padding: 0px;
    margin: 0px auto;
    height: 525px;
    position: relative;
    overflow: hidden;
    float: left;
    width: 2%;
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

iframe{
  margin:0;
  width: 97.7%;
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  float:right;
}
.left-right:hover .mpi-options-all2 h2{
  display: block;
}

.left-right:hover{
    width: 49.7%;
}

.left-right:hover ~ iframe{
    width: 50%;
}

---

https://codepen.io/anon/pen/ROEogj