将鼠标悬停在jquery上展开Div [英] Expand Div over others on mouse over jquery

问题描述

我实际上试图在表内构建产品列表。我已经有php代码，它从数据库和页面中的位置，但我被困在jquery和javascript，我是一个noob。我一直在阅读一些文档，我出去了这个脚本：

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索引和位置在css中，直到我阅读工作示例，但我真的不明白如何使其工作。
任何帮助将是apreciate。

解决方案

答案已根据OP对其问题的澄清
$ b

您必须绝对定位 .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，差别0.5 *（400-240）
 left：-45 //一半宽度差0.5 *（300-210）
}，'fast'）; 
 $ （）.css（'box-shadow'，'0 0 5px＃000'）; 
 $（this）.css（{
 zIndex：100 //改变z-index高于其他相邻单元格
}）; 
}，function（）{
 $（this）.animate（）。css（'box-shadow'，'none'）
 $（this）.animate（{
 width：210，
 height：240，
 top：0，
 left：0 
}，'fast'）; 
 $（this）.css（{
 zIndex：1 
}）; 
}）; 
}）; 
  

请参阅fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/

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:

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

you can see a demo here: 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.

解决方案

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

You will have to position .contenitore absolutely 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.

.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: center to center the image element. Instead use 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/

这篇关于将鼠标悬停在jquery上展开Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！