0

我在 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>

4

1 回答 1

1

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

然后我尝试使用position: absolute;. 为此，您仍然不需要在此处添加left或right简单地将其弹出它当前所在的位置，因为它将相对于它的直接祖先（即包含它的.blackdivdiv）而坐，因此它不会去任何地方。如果您确实想在悬停时将其移至其他位置，则必须考虑其新位置的位置，以及您的鼠标是否仍将悬停在其上。我相信这是你的问题。 

/* 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 来绑定 on-hover 事件并偏移浮出控件相对于 scroll-y 位置的位置，以防止它四处移动。

于 2019-05-22T22:28:28.850 回答