0

我有一个 div，嗯，2 个 div，当我将鼠标悬停在“主”div 上时，我希望隐藏的 div 出现（位于主 div内），然后将其底部弹出以拉伸以填充下半部分的其余部分的屏幕。

一个例子是：

在此处输入图像描述

我不是要求任何人为我编写代码。我非常感谢您可能拥有的任何链接/资源，这些链接/资源可以为我指明正确的方向。我已经做了好几个小时了，我不想为了达到这个效果而有一个完全分解的布局，但我就是无法得到它。

我已经尝试过这个和它的许多变体，但没有成功：

HTML：

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS：

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 75px; height: 100%;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: relative;
    height: 100%;
    visibility: visible;
}
4

3 回答 3

2

好吧，我有一些好消息和一些愚蠢的消息。

愚蠢的消息是，出于所有意图和目的，大约 137% 不可能只使用 CSS 来指定一个对象占据“其余高度”，而不使用某种硬编码，即使那个硬编码 -编码是百分比。

calc()即使在 CSS 中使用本应calc是灵丹妙药（我的父母，以及屏幕底部的剩余像素，将我的高度设置为“那个”。

我给你的任何纯 CSS 的解决方案都会有以下不足：

  1. 仅拉伸到父母身高的 100%
  2. 拉伸到页面高度的 100%（包括向上）
  3. 将需要保证您的父母根本不会向上或向下移动（不滚动），或者当弹出窗口出现时，用户将无法滚动直到弹出窗口消失（或者如果弹出窗口停留在屏幕上，在用户向上或向下滚动时在同一个位置查看）

坏消息来了。

好消息是，这在 JavaScript 中并不是特别困难的修复。

您想getBoundingClientRect在弹出窗口上使用，并使用.top返回对象的属性来确定您的顶部边缘是什么。
然后你可以使用你的document.body.scrollTopandwindow.screen.height来确定你在哪里，相对而言。

即：childEl.getBoundingClientRect().top - document.body.scrollTop应该等于您在屏幕上的位置。减去它window.screen.height，现在你知道你需要多高才能到达当前的底部边缘（仍然可以滚动过去）。

这不是一个防弹的跨浏览器解决方案。
但这是一个起点。

另外，我建议您使用display:none, 而不是visibility:hidden. 不同之处在于，如果您将子项设置为 width:200%，它会在页面侧面为您提供一个又大又丑的滚动条，即使它是不可见的。 visibility:hidden仍然会推动东西，即使它只是将页面的边缘推到一边。

display:none隐藏东西，但也停止推动一切。

有点像隐形人和鬼魂之间的区别，试图挤上拥挤的地铁车厢。

于 2013-05-16T04:39:08.790 回答
1

我想你正在寻找这个......

HTML

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 150px; height: 100%;
    opacity: .7;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: absolute;
    height: 98.5%;
    visibility: visible;
    left:260px;
}

#main:hover
{
    width:400px;
}

演示

我希望这可以帮助你......

于 2013-05-16T05:24:33.640 回答
0

在使用 JSFiddle 进行了几次尝试之后，我终于对结果感到满意。

HTML：

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS：

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 75px; height: 100%;
    opacity: .7;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: absolute;
    height: 98.5%;
    visibility: visible;
}
于 2013-05-16T04:34:38.017 回答