PROSAGA码农传奇-MapInfo-如何使用鼠标悬停使用css显示与地图标记相关的信息？

<div class =“post-text”itemprop =“text”>
  <P>
    如果我正确地理解你的问题，你就会非常接近，但会误解ID（＃）和类（。）之间的区别。
  </p>
  <P>
    实质上，ID用于引用单个元素。在您的示例中，只有一个地图，因此我们可以使用
     <code>
      id="map"
    </code>
     将ID设置为
     <code>
      map
    </code>
     然后在我们的CSS中我们会使用
     <code>
      #map
    </code>
     引用那个单一元素。如果要引用多个元素，则不应使用ID。
  </p>
  <P>
    但是，类可用于引用多个元素。在您的示例中，这些将是标记和相应的信息。你可以用
     <code>
      class="marker
    </code>
     将您的元素设置为标记，然后使用
     <code>
      .marker
    </code>
     引用CSS中的所有标记。然后我们可以使用
     <code>
      class="marker-info"
    </code>
     将您的元素设置为我们的信息和使用的容器
     <code>
      .marker-info
    </code>
     引用CSS中的所有信息容器。
  </p>
  <P>
    下面是我们如何将其付诸实践的简化示例。可以在选择器上方找到关于每个选择器的信息。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          /* Not relevent */
body {
  margin: 0;
}

/* Our example map */
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: grey;
  z-index: -1;
}

/* Create the marker that will always be visible */
.marker {
  position: absolute;
  background-color: white;
  color: black;
  cursor: pointer;
}
/* Create the information for our given marker */
.marker-info {
  position: absolute;
  display: none;
}
/* Select the current marker (.marker) on hover (:hover), look for the adjacent sibling (+) that holds the information (.marker-info) */
.marker:hover + .marker-info {
  display: block;
}

/* Specific to the placement of our example elements */
#marker1 {
  top: 50px;
  left: 50px;
} 
#info1 {
  top: 25px;
  left: 25px;
}

#marker2 {
  top: 100px;
  left: 100px;
}
#info2 {
  top: 75px;
  left: 75px;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div class="container">
  <div class="background"></div>
  
  <div id="marker1" class="marker">Example Marker</div>
  <div class="marker-info" id="info1">I'm info</div>
  
  <div id="marker2" class="marker">Example Marker 2</div>
  <div class="marker-info" id="info2">I'm more info</div>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    如果您希望我进一步解释，请告诉我。对于CSS来说，这是一个非常重要的概念，因此您需要完全了解它的工作原理。
  </p>
  <P>
    注意：当您在StackOverflow中提供示例代码时，我建议您提供在HTML中使用的示例图像，而不仅仅是img.png，或者只是尝试不使用图像。它有助于加快这一进程。
  </p>
</DIV>