javascript 将鼠标悬停在 jquery 上，将 Div 扩展到其他人之上

Expand Div over others on mouse over jquery

提问by Fabio

i'm actually trying to build a products list inside a table. I already have the php code which takes data from db and places in the page but i'm stuck with jquery and javascript, i'm such a noob in that. I've been reading around some documentation and i went out with this script:

我实际上是在尝试在表格中构建产品列表。我已经有了 php 代码，它从 db 中获取数据并放置在页面中，但我坚持使用 jquery 和 javascript，我在这方面是个菜鸟。我一直在阅读一些文档，然后我使用了这个脚本：

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

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

you can see a demo here: http://jsfiddle.net/fozzo/EWJGJ/

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

But this isn't really what i need. When a div expands it should expand from the center over the others that should instead remain in their positions. I think this involve to use z-index and position in css as far as i read working examples but i really don't understand how to make it works. Any help would be apreciate.

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

采纳答案by Terry

Answer has been reworked based on the OP's clarification of his question

答案已根据 OP 对他的问题的澄清进行了重新设计

You will have to position .contenitoreabsolutely and position it from the top left corner of the parent container .principale. The parent should have a relative position while the content child should be absolutely positioned.

您必须.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;
}

Also, you cannot use text-align: centerto center the image element. Instead use margin: 15px auto:

此外，您不能用于text-align: center将图像元素居中。而是使用margin: 15px auto：

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

Upon the hover event, you change the size of the content and also animate the top and left positions:

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

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

See fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/

在这里看到小提琴 - http://jsfiddle.net/teddyrised/EWJGJ/6/

回答by Adam Coulombe

you could actually do this without any js at all if you re-think the approach a little... The HTML markup is a bit different, but you would have much better performance if it was done with just css:

如果您稍微重新考虑一下该方法，您实际上可以在没有任何 js 的情况下执行此操作... HTML 标记有点不同，但是如果仅使用 css 完成，您的性能会好得多：

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

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

回答by levigideon

I recommend not using tables to set the layout of the product listing. Using divs with set widths/heights is much more suited to your application. Using absolute positioning within boxes set to relative positioning will allow you to achieve what you're trying to do quite easily.

我建议不要使用表格来设置产品列表的布局。使用具有设置宽度/高度的 div 更适合您的应用程序。在设置为相对定位的框中使用绝对定位将使您能够轻松实现您想要做的事情。

CSS:

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:

jQuery：

$('.inside').hover(

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

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

Here's the full example: http://jsfiddle.net/wms6x/

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