我有 3 个 parent ,其中将包含未定义数量的 child ,( parent 是 float 的) child 是相对的,方案如下所示:
-----Parent----- ------Parent------ ----Parent----
| Child | | Child | | Child |
| Child | | Child | | Child |
| Child | | Child | | Child |
| Child | | Child | --------------
---------------- -------------------
鼠标悬停时,子项会调整到更大的高度,但我希望它们重叠,我不想扩展父项。
我的 CSS 是这样的:
.parent{
position:relative;
float:left;
width:296px;
background-color:pink;
margin-right:10px;
}
.child{
position:relative;
height:60px;
margin-bottom:10px;
background-image:url("../images/theme_test.png");
}
我尝试使用顶部,Y 位置但它不起作用,下面的 child 会掉下来。
最佳答案
给你:jsFiddle .
我已经使用 margin
更新了头寸并注意到两件事:
- 我必须更改
z-index
以便悬停的元素位于顶部 - 我为最后一个 child 创造了一种特殊待遇——让它长大而不是倒下,这样就不会让 parent 更长
这是 mouseenter
事件:
$('.child').mouseenter(function() {
$(this).css('z-index',5);
if($(this).is(':last-child')){ // check if this is the last child
$(this).animate({
height: "80px",
'margin-top': "-20px" // grow upwards..
}, 250 );
}else{
$(this).animate({
height: "80px",
'margin-bottom': "-10px" // grow down wards..
}, 250 );
}
})
mouseout
恰恰相反。
关于jquery - css + Jquery 为了实现这种重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17384677/