Question

这让我疯狂......

我有一个文件名列表，我只想垂直滚动，所以如果文件名（= div）比列表本身宽，我想“带出”整个div来显示名称。

您可以在此处看到此操作：http://j25.wasen.net/index.php/news

我通过在悬停时创建div的克隆并将其添加到正文并在其上设置非常高的zIndex来解决这个问题。这是一个克隆div将出现在所有内容之上，但与原始div处于相同的位置。

我真的不明白为什么但是由于某种原因，宽度小于列表的div显示在错误的位置。超过宽度的项目会显示在正确的位置。

我想要检查包含名称的div是否超过列表的宽度，然后才创建克隆，这也是仅在需要时。

但是我无法获得div的真实宽度。我添加了Console.log语句，以便显示它捕获的宽度。

我检查附加到身体（=克隆）的div的宽度，而不是列表中的div（部分隐藏）......

如何获得div的真实宽度？

谢谢！

Answer 1

下载Mozilla的firebug插件。安装完成后，您可以右键单击任何元素以查看其样式和布局等。

选择右下方的布局标签，如果将鼠标悬停在div上，您将看到元素尺寸，包括任何边距和填充。

在此处下载：https://getfirebug.com/

希望有所帮助。

Answer 2

你的一般前提是好的。看这个例子。要做到这一点我

创建悬停列表项的克隆
使用offset正确定位
在mouseleave上移除悬停元素

Hover导致不必要的闪烁。因此，单独事件处理的原因。

http://jsfiddle.net/5zErQ/

var $clone;
$('li').mouseenter( function() {
  $clone = $('<span />', {text: $(this).text(), class:'temp'});
  $clone.css({position:'absolute', top:$(this).offset().top, left:$(this).offset().left});
  $('body').append($clone);
});

$('body').on('mouseleave', 'span', function() {
  $(this).remove();
});

在可滚动列表中获取部分隐藏的div的宽度（演示可用）？

2 个答案: