更改div的宽度而不更改同级div的宽度

Question

我有2个div（div1，div2）
div 1-内部有一个iframe（我真的不想更改此div宽度）
div 2-变更目标。

<div class="container">
    <div id="div1" class="col-md-9">
        <iframe></iframe>
    </div>
    <div id="div2" class="col-md-3">
        (content)
    </div>
</div>

我需要更改div2（黑框）的宽度而不更改div1（带红点边框的白框）的宽度。

我想为此使用jQuery animate

$('#div2').on('mouseenter', function(){
  $('#div2').animate({
    width:'?????'
  }, 500)
})

我试图独自做，但是不知道怎么做。

Answer 1

想法是通过使用负边距来更改内部div的宽度：

iframe {
  width:100%;
}
#div2 {
  border:1px solid red;
  height:150px;
}

#div2 div {
  height:100%;
  background:rgba(0,0,0,0.3);
  transition:1s all;
}
#div2:hover div{
  margin-left:-200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div id="div1" class="col-xs-9">
      <iframe></iframe>
    </div>
    <div id="div2" class="col-xs-3">
      <div>
      (content)
      </div>
    </div>
  </div>
</div>