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

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/