Question

我有一个div网格，每个都有内容：一些文字，一张图片和某种某种[x]按钮。这些div都将位置设置为绝对（这是一个不规则的网格，这就是我选择绝对的原因）。

我现在要做的是当鼠标光标悬停在它们上面时将它们展开（并将它放在网格中其他重叠的div之上）。我设法在这里做到了：http://jsfiddle.net/CvhkM/2833/。问题是我希望它恢复到它的初始位置和维度（每个div都有自己的位置和维度），并且由于某种原因它不起作用......（请注意，这是我第一次使用jQuery）。哦，我可以补充说，如何限制它不要扩展到区域之外（矩形区域）？

Answer 1

上面提到的溢出问题肯定有帮助，你可以在你的CSS中做到这一点。我个人会做溢出：隐藏或溢出：自动，这样你的溢出内容将保持隐藏，直到盒子悬停在上面。

我在下面添加了代码，以帮助您让代码变得动态，您可以根据需要自由调整悬停动画上的数字，以及乘法因素，这可以让您在调整大小时更进一步根据原始尺寸：）

var multiplying_factor = 1.5;
$(function() {
    $('.div').each(function() {
        $(this).data('original_position', $(this).offset());
        $(this).data('original_width', $(this).width());
        $(this).data('original_height', $(this).height());

        $(this).hover(function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor / 4),
                top    : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor / 4),
                width  : $(this).data('original_width') * multiplying_factor,
                height : $(this).data('original_height') * multiplying_factor
            }, 300);
        },function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left,
                top    : $(this).data('original_position').top,
                width  : $(this).data('original_width'),
                height : $(this).data('original_height')
            }, 300);
        });
    });

});

Answer 2

这是一个溢出问题。尝试添加

$('.div').css('overflow','visible');

请参阅此JSFiddle：

http://jsfiddle.net/CvhkM/2834/

使用JQuery在所有方向扩展div

2 个答案: