Javascript 将鼠标悬停在jquery上，将Div展开到其他对象上

我实际上是想在一个表中建立一个产品列表。我已经有了php代码，它可以从数据库中获取数据并将其放在页面中，但是我一直在使用jquery和javascript，在这方面我是个呆子。我一直在阅读一些文档，并编写了以下脚本：

javascript

$(window).load(function(){
$('.principale').hover(function() {
    $(this).animate({
        width: 215, height: 350, margin: 0,
    }, 'fast');
/*  $(this).animate().css('box-shadow', '0 0 10px #44f')*/
    $(this).animate().css('box-shadow', '0 0 5px #000')

    }, function() {
        $(this).animate().css('box-shadow', 'none')
        $(this).animate({
            width: 210, height: 240, margin: 0,
        }, 'fast');
    });
});

css

您可以在此处看到演示：

但这不是我真正需要的。 当一个div扩展时，它应该从中心扩展到其他应保持其位置的div。就我阅读的工作示例而言，我认为这涉及到在css中使用z-index和position，但我真的不明白如何使其工作。

---

任何帮助都是非常感谢的

根据OP对其问题的澄清，对答案进行了修改

您必须绝对定位

.contenitore

，并将其从父容器的左上角定位

.principale

。父对象应具有相对位置，而内容子对象应处于绝对位置

.principale {
    height: 240px;
    width: 210px;
    position: relative;
}
.principale .contenitore {
    background-color: #fff;
    height: 240px;
    width: 210px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

此外，不能使用

text align:center

使图像元素居中。改为使用

边距：15px自动
：

.immagine {
    border: 1px solid maroon;
    margin: 15px auto;
    height: 168px;
    width: 168px;
    position:relative;
}

悬停事件发生后，您可以更改内容的大小，并设置顶部和左侧位置的动画：

$(window).load(function(){
$('.contenitore').hover(function() {
    $(this).animate({
        width: 300,
        height: 400,
        top: -80,  // Half the height difference 0.5*(400-240)
        left: -45  // Half the width difference 0.5*(300-210)
    }, 'fast');
    $(this).animate().css('box-shadow', '0 0 5px #000');
    $(this).css({
        zIndex: 100  // Change z-index so that is the positioned above other neighbouring cells
    });
}, function() {
    $(this).animate().css('box-shadow', 'none')
    $(this).animate({
        width: 210,
        height: 240,
        top: 0,
        left: 0
    }, 'fast');
    $(this).css({
        zIndex: 1
    });
});
});

请看这里的fiddle-
如果您重新考虑一下该方法，您实际上可以在没有任何js的情况下完成此操作。。。HTML标记有点不同，但如果只使用css，则性能会更好：


我建议不要使用表来设置产品列表的布局。使用具有设置宽度/高度的div更适合您的应用程序。在设置为“相对定位”的框中使用绝对定位将允许您非常轻松地实现您想要实现的目标

CSS：

   .outside {
        float: left;
        width: 150px;
        height: 150px;
        position: relative;
        padding: 10px;
    }

    .inside {
        position: absolute;
        border: 1px solid #000;
        width: 150px;
        height: 150px;
        background: #eee;
        z-index: 900;
    }

$('.inside').hover(

function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
});

jQuery：

   .outside {
        float: left;
        width: 150px;
        height: 150px;
        position: relative;
        padding: 10px;
    }

    .inside {
        position: absolute;
        border: 1px solid #000;
        width: 150px;
        height: 150px;
        background: #eee;
        z-index: 900;
    }

$('.inside').hover(

function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
});

以下是完整的示例：
谢谢您的回答。我检查了您的更新，但实际上，当一个div展开时，其他div似乎仍在移动，但看起来它并没有在其上展开。这是因为在触发鼠标悬停事件时，您仍在更改div的宽度，并且您正在添加边框。这就是为什么。你所说的扩张是什么意思？您的意思是希望整个单元格扩展到相邻单元格，还是仅扩展内容？你需要更具体一些。对不起，我在第一阶段不清楚，我希望单元格扩展到相邻的单元格和内容上（单元格未扩展时隐藏）。然后检查这把小提琴-这是你想要的吗？（放大宽度变化以显示效果）这是以正确的方式指向，但单元格应以相同的方式从中心向上和底部以及向右和向左扩展。我希望澄清。