Question

我实际上是想在表格中构建产品列表。我已经有了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中的位置，但我真的不明白如何使其工作。任何帮助都是apreciate。

Answer 1

根据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使图像元素居中。而是使用margin: 15px auto：

.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
    });
});
});

请参阅此处的小提琴 - 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/

将鼠标悬停在jquery上，将Div展开

3 个答案: