因此,我已经为示例进行了很多研究,但是对于我要尝试执行的操作却一无所获。

我正在建立一个博客,首页上有很多这样的帖子-

http://prntscr.com/1vjoun

博客的大小根据其中的文字数量而有所不同-

http://prntscr.com/1vjozq

当您将鼠标悬停在博客上时,我试图在博客内部显示一个小条,使其与底部的文本重叠,以便我可以显示一些选项,例如“喜欢”,“收藏夹”,“功能”或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,该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像素)-

http://prntscr.com/1vjppq

我还尝试不将其位置从相对位置更改为绝对位置,这确实提供了一种理想的结果,除了它使盒子重新调整了大小,这是我不希望这样做的。

我希望无论'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();
});


未经测试,但这应该可以给您〜您所需要的。

10-05 23:09