你的需求很清晰：图片默认带灰度滤镜，中间显示提示文字，鼠标悬停时滤镜和文字一起消失。咱们可以利用CSS伪元素和:hover状态来实现，完全不用碰JS。

实现思路 #

• 借助你已经设置了position: relative的.parent容器，用它的伪元素（比如::before）生成提示文字，方便定位在图片正中间。
• 给伪元素设置默认显示样式，同时利用.parent:hover状态，让伪元素在鼠标悬停时隐藏，和图片滤镜的变化同步。
• 给伪元素加pointer-events: none，避免它挡住图片的鼠标交互（包括你设置的map区域点击）。

修改后的完整代码 #

CSS部分

.tooltip { 
  position: absolute; 
  z-index: 9999; 
  border: 1px solid black; 
  min-width: 100px; 
  max-width: 150px; 
  background: white; 
  border-bottom: 1px dotted black; 
  pointer-events: none; 
  width: 120px; 
  background-color: black; 
  color: #fff; 
  text-align: center; 
  border-radius: 6px; 
  padding: 5px 0; 
} 

area { 
  position: relative; 
} 

.parent { 
  position: relative; 
} 

/* 新增：生成提示文字的伪元素 */
.parent::before {
  content: "Hover image to see our offices";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 16px;
  text-align: center;
  pointer-events: none; /* 不阻挡鼠标交互 */
  transition: opacity 0.3s ease; /* 和滤镜过渡时间一致 */
  opacity: 1;
}

/* 悬停时隐藏伪元素 */
.parent:hover::before {
  opacity: 0;
}

.profile-pic { 
  width: 100%; 
  height: auto; 
  box-shadow: #222 0.2em 0.2em 1em; 
  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%); 
  filter: grayscale(100%) brightness(135%) contrast(120%); 
  transition: filter 0.3s, box-shadow 0.3s; 
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
} 

.profile-pic:hover, .profile-pic:focus { 
  -webkit-filter: none; 
  filter: none; 
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em; 
}

HTML部分（无需修改，保持原有结构即可）

<div class="parent"> 
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map" class="profile-pic"> 
  <map name="image-map"> 
    <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly"> 
    <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly"> 
    <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly"> 
    <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly"> 
    <div class="tooltip" id="tooltip"></div> 
  </map> 
</div>

关键细节说明 #

• 完美居中：top:50%+left:50%配合transform: translate(-50%, -50%)，不管图片尺寸如何变化，文字都能精准居中。
• 同步动画：伪元素的opacity过渡时间和图片滤镜的过渡时间保持一致，让消失效果更协调自然。
• 不阻挡交互：pointer-events: none让伪元素“透明”于鼠标操作，不会影响图片hover和map区域的点击。
• 视觉友好：半透明黑色背景既保证文字可读性，又不会完全遮挡下方的灰度图片。

这样修改后，你的图片默认会显示提示文字，鼠标悬停时文字平滑消失，同时滤镜也移除，完全符合需求，全程只用CSS实现~

内容的提问来源于stack exchange，提问作者Pepe