Отобразить div при наведении курсора и сделать его прокручиваемым

Question

При наведении курсора на div я хочу отобразить полностраничный div с фоновым изображением и текстом сверху.Поднятый div должен оставаться на вершине всего.Пока это работает, за единственным исключением, что я не могу понять, как сделать прокручиваемый текст переполнения.

Есть идеи, как заставить эту работу работать?

JSFiddle

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

Div .content исчезает, как только вы прекращаете зависать .title.Чтобы предотвратить это, продолжайте показывать .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 2

Спасибо за ваши ответы, но они не достигают того, что я ищу.Есть ли способ сохранить .title сверху, но специально для .info для прокрутки?

Answer 3

Вы не можете навести курсор на то, чтобы что-то появилось на всей странице, потому что, как только оно окажется на всей странице, вы больше не будете наводить курсор на оригинальную вещь (вот почему ваш пример выше мигает), и она исчезнет.Если вы используете прослушиватель событий JavaScript (например, onMouseOver), вы можете сделать так, чтобы он появился, добавив класс с «display: absolute» или «block» или чем угодно, что вы хотите.Тогда он будет оставаться открытым, пока вы не используете какой-либо другой прослушиватель событий (например, «Нажмите» на X), чтобы закрыть элемент.