Javascript 使悬停调整元素大小仅影响元素

我有一个包含一些信息的控件，我希望用户能够将鼠标悬停在元素上以查看更多信息

然而，做一些类似于：

$('a.song').each(function() {
  var origwidth = $(this).width();
  var origheight = $(this).height();
  $(this).hover(
    function() {
      $(this).stop().animate({width: origwidth * 2, height: origheight * 2});
    }, function() {
      $(this).stop().animate({width: origwidth, height: origheight});
  });
});

使元素影响其他元素的位置（而不是简单地重叠），并且宽度扩展受到

列计数的限制：5在
ol
css规则中

当元素扩展时，我们如何使其覆盖所有重叠的元素，而不是推动它们，并且即使使用
列计数：5，也可以适当地扩展宽度
 

您可以在元素上使用
position:absolute
，并设置容器的宽度

在jsfiddle中，我还使用了z-index来确保悬停的元素显示在其他元素的上方

ol li {
  display: inline-block;
  margin: 5px 10px;
  position:relative;
  width: 200px;
  height: 40px;
}

ol li a {
  background-color: #EEE;
  display: block;
  width: 200px;
  height: 40px;
  cursor: pointer;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
    position:absolute;
}

另外，您可以使用CSS3而不使用javascript来实现这一点。
您可以在元素上使用
位置：绝对
，在容器上使用
最大宽度
。您可以克隆它。您可能还想让最右边的扩展到左边，而不是右边。@但这需要我去掉
列计数。我有一个很大的元素列表，但我不知道有多少元素，所以我想使用
列计数
将其设为5列。@我认为我不理解问题的这一部分，并且JSFIDLE中没有
列计数：5
。什么是
列计数：5
“正确扩展宽度”是什么意思？