2

我在这里搜索并搜索了几个小时，但还没有找到解决这个问题的方法......基本上，我有一个巨大的图标列表，一旦每个列表项悬停，它就会展开以显示项目的文本名称. 但是，在为宽度设置动画后，整个文档将被迫重排。

有没有办法解决？我已经尝试了所有我能想到的 jQuery 和 css 组合，但都无济于事。一旦悬停在基于 jQuery position() 的位置上，我尝试添加绝对定位（相对于父 UL）......但是，这并没有像我希望的那样工作。

我真的很希望能够悬停每个图标，让它展开以显示文本，而不是重排其余内容，只是像它处于固定位置一样，因此不与其余部分交互内容布局。

这是动画位：

  $('.service-generator li').hover(function() {
    var labelWidth = $(this).children('label').width() + 41;
    $(this).animate({width: labelWidth + 'px'}, 180);
  },
  function() {
    $(this).animate({width: '35px'}, 180);
  });

另外，我想实际标记的视图可能会有所帮助，所以在这里：

<ul class="service-generator">
  <li id="[service-name]" class="full-service-wrapper photo">
    <label class="icon-name" for="[service-name]-checkbox">[service-name]</label>
    <div class="icon-wrapper">
      <input type="checkbox" checked="checked" name="[service-name]" id="[service-name]-checkbox"><img alt="[service-name]" title="[service-name]" src="[service-name].ico">
    </div>
  </li>
</ul>

这是显示结果的图像： 在此处输入图像描述

4

1 回答 1

2

做到这一点的方法是让你的灰色圆形边框 div 容器绝对定位在 li 标签内，位置相对。然后，在它们悬停时调整绝对定位的灰色边框 div 的宽度。您还可能需要在 mouseover/mouseout 上调整 z-indexes 以控制重叠。

于 2012-05-27T22:23:34.403 回答