使用jQuery如何悬停使元素处于活动状态并使其其他同级更改大小？没有DIV掉到下一行？

我正在尝试在一个容器中创建一个隐藏和显示内容4个框，当一个框打开（活动）并变宽时，显示内容其余的框应稍微变宽，而最后一个div不向下按一行>这是我的脚本：

$('.box').hover(function(){        
    //DO SOMETHING
    $(this).addClass('active');
    if($(this).hasClass('active')) {
        $(this).children('.show').show("fold", 1000);
    }

    }, function() {
          $(this).children('.show').hide("fold", 1000);
          //DO SOMETHING
          $(this).removeClass('active');        
     });

这是我的html：

    <div id="lb1" class="box">
        <div class="show" style="display:none">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
    <div id="lb2" class="box">
    <div class="show" style="display:none">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
    <div id="lb3" class="box">
    <div class="show" style="display:none">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
    <div id="lb4" class="box">
    <div class="show" style="display:none">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

---

任何人有任何想法，这里也是我的小提琴示例：

你可以这样做：

$('.box').hover(function () {
    $(this).addClass('active');
    $(this).children('.show').show("fold", 1000);

    $(this).siblings().addClass("smaller");    //make siblings smaller

}, function () {
    $(this).children('.show').hide("fold", 1000);

    $(this).removeClass('active');
    $(this).siblings().removeClass("smaller"); //resotre siblings width
});

和css：

.smaller {
    width: 23.33333333%;  /* (70/3)% */
}

---

查看：

同时发布您的HTML代码。谢谢！！看起来这会起作用。。。。我差一点就到了，只是写错了！再次感谢