0

所以我环顾四周寻找一个例子，但我找不到任何我想要做的事情。

我正在建立一个博客，首页有一堆帖子，如下所示 -

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。

.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 每次都出现在可见文本区域的底部。

抱歉，如果我描述性不够或没有提供足够的代码，如果您想查看更多内容，请发表评论。

4

1 回答 1

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

未经测试，但这应该给你〜你需要的东西。

于 2013-10-06T03:44:33.660 回答