Question

查看此JSfiddle。我想推动另一个“推这个！”的div。当菜单在悬停时调整大小/扩展。这完全可以用css吗？

<div id="nav">
<ul>
    <li><a href=""><span>01</span> HomePage</a>
    </li>
    <li><a href=""><span>02</span> SubPage 1</a>
    </li>
    <li><a href=""><span>03</span> SubPage 2</a>
    </li>
    <li><a href=""><span>04</span> SubPage 3</a>
    </li>
    <li><a href=""><span>05</span> SubPage 4</a>
    </li>
</ul>

<div id="pad">push this!</div>

Answer 1

将#nav的样式从position: absolute更改为float: left。否则，#nav将被取出文档流程，并且不会影响其他元素的定位。

完成后，您可以从padding-left移除#pad：

Fiddle 1

<小时/> 不使用jQuery就可以获得相同的效果。添加此CSS：

#nav {
  width:35px;
  transition: width 0.5s;
}

#nav:hover {
  width: 200px;
}

Fiddle 2

Answer 2

如果您真的想使用jQuery，就像您在jsFiddle中一样，那么请考虑：

$(function () {
$('#nav').hover(function () {
    $(this).animate({
        width: '200px'
    }, 500);
    $('#pad').animate({'padding-left':'200px'},500);
}, function () {
    $(this).animate({
        width: '35px'
    }, 500);
    $('#pad').animate({'padding-left':'35px'},500);
}).trigger('mouseleave');

}）;

CSS3推移div相对于其他div移动

2 个答案: