Hover 单个照片上不同位置的文本

Question

当用户在每个人上方时，我试图向用户提供照片中人物的简短描述（悬停文本不像工具提示）。 有人可以帮我吗？ 我尝试使用区域 map 但似乎无法在这里实现。 我对此很陌生。 谢谢

Answer 1

对于响应式解决方案，您可以测量每个面的 position 以及整个图像的宽度和高度，然后在每个面上获取 CSS 到 position 一个透明的、可悬停的元素。

对于这个片段，我只是在你的照片上使用了一个（物理）标尺，因为拥有像素完美的准确性并不重要。

 * { margin: 0; padding: 0; box-sizing: border-box; }.container { --imgW: 21.5; --imgH: 10.5; width: 100vw; height: calc(100vw * (var(--imgH) / var(--imgW))); background-image: url(https://i.stack.imgur.com/G1uWk.png); background-size: 100% auto; position: relative; }.container>:nth-child(n) { position: absolute; left: calc(100% * var(--left) / var(--imgW)); top: calc(100% * var(--top) / var(--imgH)); background-color: transparent; width: calc(100% * (var(--right) - var(--left)) / var(--imgW)); height: calc(100% * (var(--bottom) - var(--top)) / var(--imgH)); z-index: 1; }.container>:nth-child(1) { --left: 4.5; --right: 6.75; --top: 2.25; --bottom: 4.5; }.container>:nth-child(2) { --left: 10.75; --right: 13.25; --top: 3; --bottom: 5.5; }.container>:nth-child(n)>:first-child { display: none; background: white; position: absolute; top: 0; left: 0; width: 100px; height: 100px; padding: 1vw; overflow: auto; }.container>:nth-child(n):hover>:first-child { display: block; }

 <div class="container"> <div> <div>Person 1</div> </div> <div> <div>Person 2</div> </div> </div>

Answer 2

你可以参考 w3schools 图片 map https://www.w3schools.com/html/html_images_imagemap.asp

我尝试通过在 map 中添加文本并将 hover 上的可见性设置为可见来在咖啡上创建 hover，您可以参考以下代码。 我认为您必须手动 position 文本。

 <.DOCTYPE html> <html> <body> <style>:coffee-text{ visibility;hidden. }:coffee.hover:coffee-text{ visibility;visible: } </style> <h2>Image Maps</h2> <img src="https.//www.w3schools.com/html/workplace,jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap" class='coffee' > <area shape="circle" coords="337,300.44" href="coffee htm" ><span class='coffee-text'>Coffee</span> </map> </body> </html>