当您在图形元素上 hover 时尝试显示图像和文本

Question

我正在尝试显示图像，但它没有显示并且图像中应该有文字。 我想我需要为图像添加某种尺寸，但仍然不确定。 该图形目前只是一个正方形，但它将是时间线上的一个点，显示重要事件，因此当将鼠标悬停在时间线上的点上时，其旁边的图像和文本将显示人们想要查看的事件。 我在 CodePen 上找到了这段代码，显示了如何 hover 文本，但我尝试添加图像但没有显示。 我是编码新手，所以请温柔。 :)

编辑：所以我在编写一个婚礼网站，我想放一个“我们的故事”部分，在该部分中，有一个沿着页面运行的时间线，并且在时间线的线上将是点，表示发生的重大事件。 我试图让一旦有人将鼠标悬停在这些点上，就会弹出图像和文本。

 .reference { position: relative; background: tomato; width: 100px; height: 100px; }.popout-menu { position: absolute; visibility: hidden; left: 100%; background: #333; color: white; padding: 15px; }.reference:hover>.popout-menu, .reference:focus>.popout-menu, .reference:focus-within>.popout-menu { visibility: visible; }.popoutimg { width: auto; }

 <div class="reference" tabindex="0"> <div class="popout-menu"> <img src="https://via.placeholder.com/100" alt="" class="popoutimg"> </div> </div>

Answer 1

似乎您可以在弹出菜单 div 中添加您的文本。 它应该显示在弹出窗口内的图像下方：

 .reference { position: relative; background: tomato; width: 100px; height: 100px; }.popout-menu { position: absolute; visibility: hidden; left: 100%; background: #333; color: white; padding: 15px; }.reference:hover>.popout-menu, .reference:focus>.popout-menu, .reference:focus-within>.popout-menu { visibility: visible; }.popoutimg { width: auto; }

 <div class="reference" tabindex="0"> <div class="popout-menu"> <img src="https://via.placeholder.com/100" alt="" class="popoutimg" /> <div>Your text here</div> </div> </div>