所以我四处寻找了一个例子,但我找不到任何关于我到底想做什么的东西。
我正在构建一个博客,首页有一堆帖子,顺序如下 -
博客的大小取决于其中的文本量 -
当您将鼠标悬停在博客上时,我试图在博客内部显示一个与底部文本重叠的小栏,以便我可以显示一些选项,例如“喜欢”“收藏”“功能”或w/e 这就是我的问题所在。
echo "<div class='blogpost' id='" . $row['blogid'] . "'>";
echo "<h3 class='blogheader'>" . $row['blogheader'] . "</h3>";
echo "<p class='blogbody'>" . $row['blogbody'] . "</p>";
echo "<div class='blogextras'></div>";
echo "</div>";
我创建了将包含上述选项的“blogextras”div。
.blogextras {
position:relative;
height:35px;
width:100%;
background:#333;
}
我给它一些风格。
$(".blogpost").hover(function(){
$(".blogpost").css("overflow", "auto");
$(".blogextras").show();
$(".blogextras").css("position", "absolute");
});
$(".blogpost").mouseleave(function(){
$(".blogpost").css("overflow", "hidden");
$(".blogextras").hide();
$(".blogextras").css("position", "relative");
});
添加一些 jQuery。
但我的最终结果是“blogextras”div 出现在我想要的位置下方(大约 35 像素)-
我也尝试不改变它的位置,从相对位置到绝对位置,这确实给出了一种期望的结果,除了它使盒子重新调整大小,我不希望它这样做。
无论“blogpost”div 的大小如何,我都希望“blogextras”div 每次都出现在可见文本区域的底部。
抱歉,如果我的描述不够充分或没有提供足够的代码,如果您想查看更多内容,请发表评论。
最佳答案
您的 .blogpost
容器需要一个相对位置,以便您可以将您的 .blogextras
栏准确地定位在该容器内。您还需要为 .blogextras
栏提供更高的 z-index
,以便它与 .blogpost
内容重叠:
.blogpost {
position:relative;
overflow:hidden;
/* Other CSS */
}
.blogextras {
position:absolute;
z-index:10;
bottom:0;
left:0;
display:none;
height:35px;
width:100%;
background:#333;
}
$(".blogpost").hover(function(){
$(".blogextras").fadeIn();
});
$(".blogpost").mouseleave(function(){
$(".blogextras").fadeOut();
});
未经测试,但这应该能满足您的需求。
关于php - 在 jQuery 函数之后重叠相对定位的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19205129/