Question

将div悬停时，我想显示一个整页的div，顶部有背景图片和文字。然后，悬停的div应该保留在所有内容之上。到目前为止，该方法仍然有效，唯一的例外是我不知道如何使溢出文本可滚动。

有什么想法可以使这项工作成功吗？

html：

<div class="container">
<div class="title">Show content</div>
<div class="content">
<div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
<div class="infocontainer">
<div class="info">
Lorem Ipsum...
</div>
</div>
</div>
</div>

css：

.container {
position: fixed;
left: 50%;
top: 10%;
}

.content {
display: none;
}

.title:hover + .content {
display: block;
width: 100%;
height: 100%;
}

.title:hover {
position: relative;
z-index: 3;
}

.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.infocontainer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
overflow: scroll;
}

.info {
height: 100%;
padding-right: 70%;
}

更新：当我将.info与z-index放在顶部时，它变得可滚动，但由于.title：hover被覆盖，所以我获得了闪烁效果。参见：jsfiddle.net/dm41eo5z

Answer 1

您不能将鼠标悬停在整个页面上，因为一旦鼠标悬停在整个页面上，您就不再将鼠标悬停在原始页面上（这就是您的示例闪烁的原因），它将消失。如果您使用JavaScript事件侦听器（例如onMouseOver），则可以通过添加带有“ display：absolute”或“ block”或您希望它执行的任何操作的类来使其出现。然后它将保持打开状态，直到您使用其他事件侦听器（例如X上的“单击”）关闭元素为止。

Answer 2

一旦您停止悬停.content，.title div就会消失。为防止这种情况，请在悬停时继续显示.content：

.title:hover + .content, .content:hover {
    display: block;
    width: 100%;
    height: 100%;
}

注意：要隐藏.content，用户必须将光标移出屏幕。

演示：

.container {
  position: fixed;
  left: 50%;
  top: 10%;
}

.content {
	display: none;
}

.title:hover + .content, .content:hover {
	display: block;
	width: 100%;
	height: 100%;
}

.title:hover {
  position: relative;
  z-index: 3;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.infocontainer {
  position: fixed;
  top: 0;
  left: 0;
	height: 100vh;
	width: 100vw;
  z-index: 2;
  overflow: scroll;
}

.info {
  height: 100%;
  padding-right: 70%;
}

<div class="container">
  <div class="title">Show content</div>
  <div class="content">
    <div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
    <div class="infocontainer">
      <div class="info">
Pellentesque venenatis tempor ultrices. Nunc maximus erat vel tellus vestibulum, id auctor justo tristique. Ut volutpat eu tellus ut vulputate. Cras id finibus massa. Quisque neque lacus, pretium sed luctus in, semper ut quam. Donec elementum volutpat elementum. Morbi nibh nunc, scelerisque congue turpis nec, lacinia venenatis tortor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi quis magna urna. Etiam tincidunt velit lacus, ac blandit ex pretium nec. Nulla semper erat ut tortor luctus, sit amet suscipit felis ullamcorper. Etiam laoreet, mauris ut volutpat pellentesque, velit neque euismod sem, in condimentum mauris orci nec nibh. Vivamus ac sem et turpis pellentesque volutpat ac ac ligula. Phasellus feugiat dapibus maximus. Donec eros felis, suscipit eu neque quis, sagittis faucibus ipsum. Nam auctor molestie quam nec tristique. Aliquam dolor velit, condimentum in vehicula ut, pretium sed leo. Proin sit amet quam nunc.
Integer eu orci quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed felis vitae justo faucibus blandit at a dolor. Curabitur id nisi nec elit aliquam convallis nec eu est. Aenean viverra id diam ac accumsan. Praesent tempor, magna eget molestie sodales, neque libero pretium magna, id euismod justo erat at est. Phasellus ultrices metus et massa varius, at rutrum augue pretium. Mauris ultrices felis et magna luctus sodales. Curabitur sodales pellentesque ante auctor molestie. Donec sed massa scelerisque elit auctor lacinia ac vel risus. In eleifend vulputate sapien a tristique. Nam eleifend rutrum metus.
      </div>
    </div>
  </div>
</div>

Answer 3

到目前为止，感谢您的答复，但他们并没有完全达到我的期望。也许有一种方法可以将.title放在首位，但专门将.info作为滚动目标？

在悬停时显示div并使其可滚动

3 个答案: