在鼠标悬停时显示名称

Question

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

这些是我的问题：

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

在鼠标悬停时显示名称

Displaying names onmouseover

javascript

css

onmouseover