Question

我在html中有一个列表，其中包含列表项，并且垂直滚动条启用了溢出功能。列表项的子项之一是停在列表项右上角的图像。当鼠标悬停在其上时，我想显示一个弹出控件，该弹出控件也是列表项中的一个子控件。问题是弹出按钮会被切碎，但是我希望它浮动并在鼠标悬停时显示在滚动条上。可能吗我试图避免将图像和弹出控件放置在列表项之外，因为这意味着我们每次滚动并将其当前放置在列表项中时，都必须计算其位置。而且，这是一个已经启动并正在运行的复杂网页，因此我不想在列表和滚动条上花太多时间。

出于这个问题的目的，我创建了一个更简单的test.html。在下面的代码中，假设我想让绿色的块在鼠标悬停时经过滚动条。甚至有可能吗？

我尝试使弹出位置=绝对，尝试使溢出=可见，并尝试提供非常大的z-index。

<style type="text/css">
div#listpanel {
  width: 254px;
  height: 1180px;
  overflow-y: scroll;
  overflow-x: hidden;
}
div.blackdiv {
  left: 0px;
  width: 500px;
  height: 107px;
  top: 20px;
  background: black;
}
div.greendiv {
  left: 180px;
  top: 50px;
  width: 600px;
  height: 20px;
  background: green;
}
</style>

<div id="listpanel">
<div role="list">
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
	<div class="blackdiv" role="listitem">
		<div class="greendiv">
		</div>
	</div>
</div>
</div>

Answer 1

绿色和黑色div上的top和left样式没有任何作用，因为div最初是非定位（静态）元素。

然后，我尝试使用position: absolute;添加悬停样式。为此，您仍然不需要在此处添加left或right即可将其弹出当前所在的位置，因为它相对于其直接祖先位于其中，其中包含.blackdiv div，所以它不会到任何地方。如果要做要将其悬停在其他位置，则必须考虑它的新位置，以及鼠标是否仍悬停在它上面。我相信这是您的问题。

/* CSS */
div#listpanel {
  width: 254px;
  height: 580px;
  overflow-y: scroll;
  overflow-x: hidden;
}

div.blackdiv {
  width: 500px;
  height: 107px;
  background: black;
}

div.greendiv {
  width: 600px;
  height: 20px;
  background: green;
}

div.greendiv:hover {
  background: red;
  position: absolute;
}

<!-- HTML -->
<div id="listpanel">
    <div role="list">
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
        <div class="blackdiv" role="listitem">
            <div class="greendiv">
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/yxd7mp4c/1/

更新：好的，所以当您向下滚动时，它会中断，这似乎是由于我上面提到的类似原因。当绿色div变为absolute时，它会认为其父级位于页面加载时的位置，而不是滚动后的新位置，因此它会跳来跳去，您不再需要将鼠标悬停在其上。您将必须使用一些JavaScript来绑定悬停事件，并使弹出控件的位置相对于y滚动位置偏移，以防止其移动。

可能有一个孩子漂浮在垂直滚动上方吗？

1 个答案: