所以我已经看了很多一个例子,但是我找不到任何关于我想要做什么的事情。
我正在建立一个博客,首页上有一堆帖子,就像这样 -
博客的大小根据文字的大小而有所不同 -
当您将鼠标悬停在博客上时,我会尝试在博客内部显示一个小条形图,该条形图与底部的文本重叠,以便我可以显示一些选项,例如“赞”'收藏''功能'或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都出现在可见文本区域的底部。
很抱歉,如果您想要查看更多信息,如果我没有足够的描述性或者没有提供足够的代码,请发表评论。
答案 0 :(得分:0)
您的.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();
});
未经测试,但那可以给你〜你需要的东西。