Question

我有list of elements有一些信息，我希望用户能够将鼠标悬停在元素上以查看更多信息。

然而，做一些事情：

$('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});
  });
});

导致元素影响其他元素的位置（而不是简单地重叠），宽度扩展受column-count: 5; css规则中ol的限制。

当元素展开时，我们如何才能实现它，它只是覆盖任何重叠元素而不是推动它们，并且即使使用column-count: 5;也可以正确扩展宽度？

Answer 1

http://jsfiddle.net/Yk2du/1/

您可以在元素上使用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;
}

P.S。你可以使用CSS3而不是javascript。

使悬停调整大小元素只影响元素

1 个答案: