在鼠标悬停时显示名称

问题描述

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

这些是我的问题：

有人可以解释一下它是如何工作的，以及它是否可以简化
为什么如果我用 FirstName LastName 替换 Name1，输出会出现在两个不同的行上。除了将 FirstName、LastName 放在一个只有一行的表格中之外，似乎没有什么可以解决这个问题，即使如此，单词之间的间距也不正确且无法控制
为什么此代码仅适用于 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,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>

解决方法

这是一个不错的入门游戏。

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,Steeve: {
    left: 498,top: 79,width: 208,Jacques: {
    left: 56,top: 179,width: 157,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>

javascript onmouseover