将鼠标hover在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

 .tabellainizio { margin-top:100px; } .bordini { border: 1px #DDD solid; } .principale { height: 240px; width: 210px; overflow: hidden; } .principale .contenitore { height: 240px; width: 210px; float: left; display: block; } .immagine { border: 1px solid maroon; text-align: center; margin: 15px; height: 168px; width: 168px; position:relative; } .content { display: none; margin: 15px; } .contenitore:hover { width: 215px; height: 350px; margin: 0px; border: 1px solid black; } .contenitore:hover .content { display: block; } .contenitore:hover .immagine { position:relative; } 

你可以在这里看一个演示： http ： //jsfiddle.net/fozzo/EWJGJ/

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

Answer 1

根据OP对其问题的澄清，答案已经重新修改

您必须绝对定位.contenitore并从父容器.principale左上角.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来居中图像元素。 而是使用margin: 15px auto ：

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

在hover事件时，您可以更改内容的大小并为顶部和左侧位置设置动画：

 $(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 }); }); }); 

请看这里的小提琴 – http://jsfiddle.net/teddyrised/EWJGJ/6/

Answer 2

你可以在没有任何js的情况下实际做到这一点，如果你重新考虑一下这个方法…… HTML标记有点不同，但如果用css完成它你会有更好的性能：

http://jsfiddle.net/adamco/GeCXe/

 ul,li{ list-style:none;padding:0;margin:0; } ul{ width:400px; } li, .item { width:100px; height:100px; } li { float:left; margin:5px; position:relative; } .item { background-color: #eee; border:1px solid #ccc; position:absolute; z-index:1; -webkit-transition:all 0.1s ease-in-out; } .item:hover { width:110px; height:200px; z-index:2; -webkit-transform:translate(-5px,-5px); -webkit-box-shadow: 1px 1px 1px #888; } 

Answer 3

我建议不要使用表格来设置产品列表的布局。 使用设置宽度/高度的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; } 

jQuery ：

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

这是完整的例子： http ： //jsfiddle.net/wms6x/