Question

我一直试图弄清楚如何显示信息。在交互式地图上，这样，当鼠标悬停在某个位置上时，该信息就会出现；在鼠标移动时以及鼠标悬停在另一个位置上时，该信息会消失。这是一项家庭作业，但是我尝试了所有可以想到的东西以及可以在网上找到的东西。我非常新手，不了解我所缺少的内容。我需要这样的指导。

div#battleMap {             
    position: relative; }  

a.battleMarkers {             
    position: absolute; }         

a.battleMarkers {             
    position: absolute; }     


div > a#marker1 {           
    left: 340px;
}
div > a#marker2 {
    top: 194px;
    left: 358px;
}
div > a#marker3 {
    top: 202px;
    left: 400px;
}
div > a#marker4 {
    top: 217px;
    left: 452px;
}
div > a#marker5 {
    top: 229px;
    left: 498px;
}
div > a#marker6 {
    top: 246px;
    left: 544px;
}

a.battleMarkers {      
     display: none;                         
}

这是此步骤的说明：由于地图信息遵循HTML文件中的地图标记，因此请使用以下选择器：a.battleMarkers：hover + div.mapInfo。为此选择器编写一个样式规则，将其显示属性设置为一个块。

这是我的最后一次尝试：我一直在尝试重新阅读，搜索网络并重新编写代码几个小时。我不知道该怎么办。

a#marker1:hover + div#info1 {
    position: absolute;
    display: block;
}

以下是2条用于地图信息的HTML：在此处输入代码

 <div id="battleMap">
     <img src="ss_map.png" id="mapImage" alt="battle map" />
     <a id="marker1" class="battleMarkers" href="#marker1"><img src="ss_marker.png" alt="" /></a>
     <div class="mapInfo" id="info1">

Answer 1

如果我正确地理解了您的问题，那么您很接近，但是误解了ID（＃）和类（。）之间的区别。

本质上，ID用于引用单个元素。在你的榜样，只有一张地图，所以我们可以使用id="map"设置ID为map，然后在我们的CSS我们将使用#map引用一个单一的元素。如果要引用多个元素，则不应使用ID。

但是，类可以用于引用多个元素。在你的榜样，这些将是标记和相应的信息。您可以使用class="marker将元素设置为标记，然后使用.marker在CSS中引用我们所有的标记。然后，我们可以使用class="marker-info"设置你的元素，为我们的信息和使用.marker-info引用所有信息容器在CSS的容器。

下面是我们如何将其付诸实践的简化示例。有关每个选择器的信息可以在选择器上方的注释中找到。

/* 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;
}

<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>

如果您要我进一步解释，请告诉我。这是一个非常重要的概念，当涉及到CSS，所以你会想完全了解它是如何工作的。

请注意：当你在StackOverflow上给予示例代码中，我会建议提供示例图像的HTML而不是仅仅img.png或使用只是试图在所有未使用的图像。它有助于加快流程。

如何使用CSS鼠标悬停显示与地图标记相关的信息？

1 个答案: