Question

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

这是我目前的代码，问题是，鼠标悬停时没有任何反应。我的想法是删除宽度的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');
    }
}
);

Answer 1

将容器浮动到左侧，然后将鼠标悬停在width: auto;上：

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

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

工作示例：jsFiddle here

Answer 2

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

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

在鼠标悬停时使用jquery自动调整div到内容

2 个答案: