更改 div 的宽度而不更改兄弟 div 的宽度答案

【问题标题】：Change width of a div without changing width of sibling div更改 div 的宽度而不更改兄弟 div 的宽度
【发布时间】：2018-07-16 10:36:25
【问题描述】：

我有 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)
})

我想一个人做，但不知道怎么做。

【问题讨论】：

标签： jquery html twitter-bootstrap css

【解决方案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>

【讨论】：