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

Question

I have a list of elements that have a bit of information, and I want the user to be able to hover over an element to see more information.

However, doing something like:

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

causes the element to affect the position of other elements (instead of simply overlapping), and the width expansion is limited by the column-count: 5; in the ol css rules.

How can we make it so when the element expands it simply covers over any overlapping elements instead of pushing them, and properly expand the width even with column-count: 5; ?

Answer 1

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

You could use position:absolute on the element and set the width of the container.

In the jsfiddle I also used z-index to make sure the hovered element shows over the top of the others.

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;
}

PS You can do this with CSS3 and no javascript.