html - 在页面的另一侧显示 div

Question

是否可以通过将鼠标悬停在页面另一侧的一个完整的单独 div 上来显示 div/imge，仅使用 html 和 css？除此之外，是否可以在一个 div 中显示多个图像？

我希望创建一个网站，让您可以在将鼠标悬停在 div 上时看到它的图像，但能够在同一位置看到每个新图像。我希望我已经足够清楚并且有人可以帮助我，谢谢。

Answer 1

这是我的建议:您可以使用 CSS 兄弟选择器来访问隐藏的 DIV。这是我制作的简单示例:

CSS(带有一些样式)和 HTML(带有虚拟段落来演示页面上的其他元素，而且我在隐藏的 DIV 中放置了多个图像，因为您询问是否可以在一个 DIV 中显示多个图像):

.first {
  position: absolute;
  padding: 10px;
  border: 1px solid pink;
  background-color: white;
  text-align: center;
  right: 100px;
  bottom: 100px;
  cursor: pointer;
}

.second {
  display: none;
  background: white;
  border: 1px solid pink;
  padding-left: 10px;
}

.first:hover ~ .second {
  display: inline-block;
  position: absolute;
  top: 100px;
  left: 100px;
}

img {
  width: 100px;
  height: 100px;
  padding: 0;
  border: 1px solid black;
  margin: 10px;
  margin-left: 0;
}

<div class="first">HOVER ME</div>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<div class="second">
  <img src="http://placehold.it/100x100" alt="Dummy Image #1">
  <img src="http://placehold.it/100x100" alt="Dummy Image #1">
  <img src="http://placehold.it/100x100" alt="Dummy Image #1">
</div>