将鼠标悬停在特定div上时，使文本框出现

Question

在上一篇文章中，我试图将div背景图像悬停在其上（Change div Background Image when hovering on another div） 我现在正试图添加一个悬停在每个div（大陆）上的框。我遵循与@itodd在上一篇文章的回答中提到的逻辑相同的逻辑，但是对于这一部分似乎不起作用。

h1 {
  font-size: 25px;
  font-weight: 200;
}

.container {
  width: 1030px;
  margin: left;
}

.hlinkHomeAmer,
.hlinkHomeEmea,
.hlinkHomeAsia {
  font-size: 10px;
  color: black;
  background-color: antiquewhite;
  visibility: hidden;
}


/* Interactive Map */

.map,
.map-wrapper {
  position: absolute;
  width: 960px;
  height: 540px;
  border: 0px;
}

.map {
  background-image: url(World_Map.jpg);
  z-index: -1;
}


/* div */

.americas,
.americas-wrapper {
  position: absolute;
  width: 364.8px;
  height: 540px;
}

.emeari,
.emeari-wrapper {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
}

.emeari2 {
  position: absolute;
  width: 297.6px;
  height: 183.6px;
  right: 0px;
}

.ap,
.ap-wrapper {
  position: absolute;
  width: 297.6px;
  height: 356.4px;
  bottom: 0px;
  right: 0px;
}


/* Hover */

.americas-wrapper:hover~.map {
  background-image: url(Americas_Map.jpg);
}

.emeari-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.emeari2-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.ap-wrapper:hover~.map {
  background-image: url(Asia_Map.jpg);
}

.americas:hover~.hlinkHomeAmer {
  visibility: visible;
}

.emeari:hover~.hlinkHomeEmea {
  visibility: visible;
}

.emeari2:hover~.hlinkHomeEmea {
  visibility: visible;
}

.ap:hover~.hlinkHomeAsia {
  visibility: visible;
}

<h1 class="container">
  <img src="Background.png" width="25%" height="25%">
</h1>
<br>

<div class="container">
  Welcom !<br><br> The purpose .<br><br> Please select your continent on the map below in order to obtain your regional contact information.


  <br><br>


  <div class="map-wrapper">

    <div class="americas-wrapper">
      <div class="americas">
        <div class="hlinkHomeAmer">
          Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br> Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
        </div>
      </div>
    </div>

    <div class="emeari-wrapper">
      <div class="emeari">
        <div class="hlinkHomeEmea">
          Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br> Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
        </div>
      </div>

      <div class="emeari2">
      </div>
    </div>

    <div class="ap-wrapper">
      <div class="ap">
        <div class="hlinkHomeAsia">
          Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br> Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
        </div>
      </div>
    </div>

    <div class="map">
    </div>

  </div>
</div>

Answer 1

您需要像这样添加CSS：

.container {
  width: 1030px;
  margin: left;
}

.hlinkHomeAmer,
.hlinkHomeEmea,
.hlinkHomeAsia {
  font-size: 10px;
  color: black;
  background-color: antiquewhite;
  visibility: hidden;
}


/* Interactive Map */

.map,
.map-wrapper {
  position: absolute;
  width: 960px;
  height: 540px;
  border: 0px;
}

.map {
  background-image: url(World_Map.jpg);
  z-index: -1;
}


/* div */

.americas,
.americas-wrapper {
  position: absolute;
  width: 364.8px;
  height: 540px;
}

.emeari,
.emeari-wrapper {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
}

.emeari2 {
  position: absolute;
  width: 297.6px;
  height: 183.6px;
  right: 0px;
}

.ap,
.ap-wrapper {
  position: absolute;
  width: 297.6px;
  height: 356.4px;
  bottom: 0px;
  right: 0px;
}


/* Hover */

.americas-wrapper:hover~.map {
  background-image: url(Americas_Map.jpg);
}

.emeari-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.emeari2-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.ap-wrapper:hover~.map {
  background-image: url(Asia_Map.jpg);
}

.americas:hover .hlinkHomeAmer {
  visibility: visible;
}

.emeari:hover .hlinkHomeEmea {
  visibility: visible;
}

.emeari2:hover .hlinkHomeEmea {
  visibility: visible;
}

.ap:hover .hlinkHomeAsia {
  visibility: visible;
}