显示在页面

Question

对侧的div是否有可能徘徊在一个完整独立的DIV页面的反面，在短短的HTML和CSS来显示DIV/IMGE？而要补充的，就是它可以显示多个图像在一个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>