Html 所有图片及；在CSS3中使用鼠标悬停时会弹出额外的块，此时仅应显示1

我正在尝试让一个图像地图工作。我似乎无法使它正常运行。我需要知道我哪里出了问题，我能做些什么来修复它

弹出一个额外的空框，所有鼠标悬停的框都会弹出。您当时悬停的那个应该是唯一的弹出窗口

我真的很感激任何帮助

span.drop\u阿拉斯加{
底边：细点；
背景：#ffeedd；
}
阿拉斯加：悬停{
文字装饰：无；
背景：#ffffff；
z指数：6；
}
阿拉斯加州{
位置：绝对位置；
左：-9999em；
边距：2em 0 0em；
填料：1米1米1米1米1米；
边框样式：实心；
边框颜色：黑色；
边框宽度：1米；
z指数：6；
}
阿拉斯加：悬停{
左：2%；
背景：#ffffff；
}
阿拉斯加州{
位置：绝对位置；
左：-9999px；
保证金：1em 0em 0em 0em；
填料：1米1米1米1米1米；
边框样式：实心；
边框颜色：黑色；
边框宽度：1米；
}
阿拉斯加：悬停{
边际：2米0.5米；
背景：#ffffff；
z指数：6；
}
span.drop_巴西{
底边：细点；
背景：#ffeedd；
}
span.drop_巴西：悬停{
文字装饰：无；
背景：#ffffff；
z指数：7；
}
巴西{
位置：绝对位置；
左：-9999em；
边距：2em 0 0em；
填料：1米1米1米1米1米；
边框样式：实心；
边框颜色：黑色；
边框宽度：1米；
z指数：7；
}
span.降落巴西：悬停span{
左：2%；
背景：#ffffff；
}
巴西{
位置：绝对位置；
左：-9999em；
保证金：1em 0em 0em 0em；
填料：1米1米1米1米1米；
边框样式：实心；
边框颜色：黑色；
边框宽度：1米；
}
span.降落巴西：悬停span{
边际：2米0.5米；
背景：#ffffff；
z指数：7；
}

阿拉斯加音乐家的传记


有人对阿拉斯加的音乐家有什么看法吗？


他们可能会！！！


巴西音乐家的传记


有人对巴西音乐家有什么看法吗？


他们可能会！！！

我认为这里存在多个问题

首先，有一个结构错误（“.alaskan drop”div没有结束标记），但除此之外，巴西部分嵌套在阿拉斯加部分中。那是你的意图吗

第二，弹出窗口出现在多个地方的原因是，CSS告诉“span.drop\u alaska”span下的任何s，只要“.drop\u alaska”悬停在上方，就会出现。这意味着任何子跨度。这直接关系到我的第一点中的结构问题：因为从技术上讲，你们的巴西区是阿拉斯加区的一个孩子，所以它受阿拉斯加悬停规则的约束。将巴西部分移出阿拉斯加一号意味着它现在可以独立运营

以下是对原始设置的清理：

<map name="americassoundmap_map">
    <span class="drop_alaska" title="alaskan_musician">
      <span><!-- PARENT UNNAMED SPAN -->
        <div class="alaskan_drop" id="alaskan_drop">
          <area shape="rect" coords="12,42,85,76" alt="alaska">
          <a href="alaska_musician_link.php">
            <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
            <iframe width="200" height="150" src="https://www.youtube.com/embed/mLhXarmtndQ" frameborder="0" allowfullscreen></iframe>
          </a>
          <div class="biotext_alaska" id="biotext_alaska">
            <br/>An Alaskan Musician's Bio<br/>does anyone have anything to say about alaskan musicians?<br/>they might!!!
          </div><!-- end .biotext_alaska -->
          <div class="separator" id="separator">
            <span></span>
          </div><!-- end .separator -->
          <span class="drop_brazil" title="brazillian_drop">
            <span><!-- NESTED UNNAMED SPAN -->
              <div class="brazil_drop" id="brazil_drop">
                <area shape="rect" coords="315,266,400,351" alt="brazil">
                <a href="brazillian_musician_link_musician_link.php">
                  <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
                  <iframe width="200" height="150" src="https://www.youtube.com/embed/mLhXarmtndQ" frameborder="0" allowfullscreen></iframe>
                </a>
                <div class="biotext_brazil" id="biotext_brazil">
                  <br/>An Brazillian Musician's Bio<br/>does anyone have anything to say about brazillian musicians?<br/>they might!!!
                </div><!-- end .biotext-brazil -->
              </div><!-- end .brazil_drop -->
            </span><!-- END NESTED UNNAMED SPAN -->
          </span><!-- end .drop_brazil -->
        </div><!-- end .alaskan_drop --> <!-- THIS </div> TAG WAS OMITTED, I ADDED IT BACK IN -->
      </span><!-- END PARENT UNNAMED SPAN -->
    </span><!-- end .drop_alaska -->
  </map><!-- end map -->

阿拉斯加音乐家的传记
有人对阿拉斯加音乐家有什么看法吗？
他们可能会！！！

一位巴西音乐家的传记
有人对巴西音乐家有什么要说的吗？
他们可能会！！！

（小提琴：）

这里有一个部分不再嵌套：

 <map name="americassoundmap_map">
    <span class="drop_alaska" title="alaskan_musician">
      <span><!-- PARENT UNNAMED SPAN -->
        <div class="alaskan_drop" id="alaskan_drop">
          <area shape="rect" coords="12,42,85,76" alt="alaska">
          <a href="alaska_musician_link.php">
            <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
            <iframe width="200" height="150" src="https://www.youtube.com/embed/mLhXarmtndQ" frameborder="0" allowfullscreen></iframe>
          </a>
          <div class="biotext_alaska" id="biotext_alaska">
            <br/>An Alaskan Musician's Bio<br/>does anyone have anything to say about alaskan musicians?<br/>they might!!!
          </div><!-- end .biotext_alaska -->
        </div><!-- end .alaskan_drop --> <!-- THIS </div> TAG WAS OMITTED, I ADDED IT BACK IN -->
      </span><!-- END PARENT UNNAMED SPAN -->
    </span><!-- end .drop_alaska -->
    <div class="separator" id="separator">
      <span></span>
    </div><!-- end .separator -->
    <span class="drop_brazil" title="brazillian_drop">
      <span><!-- (FORMERLY) NESTED UNNAMED SPAN -->
        <div class="brazil_drop" id="brazil_drop">
          <area shape="rect" coords="315,266,400,351" alt="brazil">
          <a href="brazillian_musician_link_musician_link.php">
            <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
            <iframe width="200" height="150" src="https://www.youtube.com/embed/mLhXarmtndQ" frameborder="0" allowfullscreen></iframe>
          </a>
          <div class="biotext_brazil" id="biotext_brazil">
            <br/>An Brazillian Musician's Bio<br/>does anyone have anything to say about brazillian musicians?<br/>they might!!!
          </div><!-- end .biotext-brazil -->
        </div><!-- end .brazil_drop -->
      </span><!-- END (FORMERLY) NESTED UNNAMED SPAN -->
    </span><!-- end .drop_brazil -->
  </map><!-- end map -->

阿拉斯加音乐家的传记
有人对阿拉斯加音乐家有什么看法吗？
他们可能会！！！

一位巴西音乐家的传记
有人对巴西音乐家有什么要说的吗？
他们可能会！！！

（小提琴：）

---

---

（如果有点罗嗦的话，很抱歉，我不能只发布fiddle URL。）但是TL；DR：除非特别排除，否则CSS将影响所有子元素，这是您的原始设置所包含的内容

这仍然不起作用。。。我几乎可以肯定我的问题来自CSS；但我不知道。奇怪的是，第二把小提琴为我工作。。。（仅显示一个弹出窗口）。你确定要更新你的HTML嵌套问题吗？是的，我做了，它现在正在工作。非常感谢，我真的很感激：Dby，你会不会碰巧知道如何重新定位弹出框？？我是否只是在CSS中使用固定位置标记，然后通过固定元素/间距（ems/像素）将其放置？任何时候：）至于重新定位，这将取决于您想要它们的位置。目前，它们处于“屏幕外”，悬停时变为“屏幕上”。另一种方法是从一开始就将它们放置在您希望它们的任何位置，然后将它们设置为“display:none；”。然后，当鼠标悬停时，将其更改为“display:block；”，如下所示：