在鼠标悬停时显示名称

Question

我在一个网站上有几个人的照片（用 php 制作的），想获得以下信息：当光标移到一个人的脸上时，这个人的名字显示在底部照片。经过大量搜索后，我在另一个网站上找到了一些与我想要的代码接近的代码，在我改变了一些事情之后，我得到了它（大部分）我想要的东西，但我真的不太了解它，我是确信必须有一种更简单的方法来做到这一点。代码复制如下。当光标位于第一个“热点”类指定的位置时，文本“Name1”出现在照片底部，当光标位于第二个“热点”类指定的位置时，文本“Name2”出现.

这些是我的问题：

1. 谁能解释一下它是如何工作的，是否可以简化
2. 为什么如果我将 Name1 替换为 FirstName LastName 输出是在两个不同的行上。除了将 FirstName、LastName 放置在单行表中之外，似乎没有什么可以解决此问题，即使如此，单词之间的间距也不正确且无法控制
3. 为什么此代码仅适用于 Google Chrome 或 Firefox，但不适用于 Safari 或 Windows 浏览器。

感谢任何提示，即使是部分提示。

第一批代码是css文件，其他是php文件

.hotspot {
position: absolute; 
}
.hotspot + * {
pointer-events: none;
opacity: 0;
}
.hotspot:hover + * {
opacity: 1;
}
.wash {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
}


<div style="position: relative; height: 1px; width: 1px;">
<img src="photo.jpg" width=900px>
   <div class="hotspot" style="top: 195px; left: 277px; height: 50px; width: 50px;"> 
   </div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
   Name1
   </div>
</div>

<div class="hotspot" style="top: 202px; left: 337px; height: 50px; width: 50px;">. 
</div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
Name2 </div>
</div>

Answer 1

这是一个不错的开胃菜。

console.clear();

data = {
  Isabelle: {
    left: 100,
    top: 23,
    width: 172,
    height: 142
  },
  Clara: {
    left: 284,
    top: 38,
    width: 121,
    height: 191
  },
  Sylvie: {
    left: 412,
    top: 9,
    width: 121,
    height: 191
  },
  Steeve: {
    left: 498,
    top: 79,
    width: 208,
    height: 191
  },
  Jacques: {
    left: 56,
    top: 179,
    width: 157,
    height: 191
  },
  Julie: {
    left: 213,
    top: 178,
    width: 106,
    height: 178
  },
  Amélie: {
    left: 300,
    top: 319,
    width: 139,
    height: 211
  },
  Robert: {
    left: 456,
    top: 282,
    width: 182,
    height: 229
  }
};

// Positions the zones with their event handler setted
let names = Object.keys(data);
names.forEach((n) => {
  let zone = $("<div>");
  zone
    .addClass("imageMapZone")
    .css(data[n])
    .hover(
      function () {
        $(".namezone").text(n);
      },
      function () {
        $(".namezone").text("");
      }
    );
  $(".imageMapContainer").append(zone);
});

.imageMapContainer{
  position: relative;
}
.imageMapZone{
  position: absolute;
}
.namezone{
  Font-size: 1.4em;
  min-height: 1.6em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageMapContainer">
  <img src="https://www.quickanddirtytips.com/sites/default/files/styles/convert_webp_article_main_image/public/images/2332/people-persons-peoples.jpg?itok=wE8o-yua">
</div>
<div class="namezone"></div>