在鼠标悬停时使用 jquery 将 div 自动调整为内容答案

【问题标题】：autosize div to contents using jquery on mouseover在鼠标悬停时使用 jquery 将 div 自动调整为内容
【发布时间】：2012-12-10 17:23:11
【问题描述】：

我有一个 div 会自动隐藏在屏幕左侧并包含 miller 列。 div 内容的宽度未知。如果我使用 .width(500) 对宽度进行硬编码，它可以正常工作，但现在我正试图让它自动适应鼠标悬停时的内容，然后在 mouseleave 时缩小。

这是我目前拥有的代码，问题是，当我将鼠标悬停时没有任何反应。想法是去掉width的css属性，恢复为默认值

$(".leftnavdiv").live({                                          //code for autohide
    mouseenter:
    function () {
        $(this).css('width','');
        //$("body").css('padding-left','510px');
    },
    mouseleave:
    function () {
        $(this).css('width','10px');
        //$("body").css('padding-left','20px');
    }
}
);

【问题讨论】：

您能否发布您的 CSS 和 HTML - 另外，如果您在 jsfiddle.net 中提供您目前拥有的内容的示例，它会很有帮助，以便我们可以使用它。
要将元素拉伸到所需的宽度，您必须将其设置为auto。 CSS 中没有空值——any property has a default value (initial value). For width this is auto.

标签： jquery css fluid-layout

【解决方案1】：

将您的容器浮动到左侧，然后在鼠标悬停时设置width: auto;：

$(".leftnavdiv").bind("mouseenter", function() {
    $(this).css('width', 'auto');
});

$(".leftnavdiv").bind("mouseleave", function() {
    $(this).css('width','10px');
});

工作示例：jsFiddle here

【讨论】：

简洁优雅。效果很好:)

【解决方案2】：

尝试将宽度设置为 0，将其设置为空白使其取一些随机值。检查这个小提琴并尝试 0 和空白。您可以在控制台日志中看到差异。小提琴：http://jsfiddle.net/UyAPj/

$(this).css('width','0px');

【讨论】：