jquery - CSS3 push move div 相对于其他div 移动

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 被带出文档流，不能影响其他元素的定位。

完成后，您可以从 #pad 中删除 padding-left:

Fiddle 1

---

您可以在不使用 jQuery 的情况下获得相同的效果。添加此 CSS:

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

#nav:hover {
  width: 200px;
}

Fiddle 2