个人中心
gpt4 book ai didi

html - 在 CSS3 中使用鼠标悬停时弹出所有图像和额外 block ，而此时只有 1 个应该

转载 作者：行者123 更新时间：2023-11-28 01:31:16 25 4
gpt4 key购买 nike

我正在尝试使图像映射正常工作。我似乎无法正常进行。我需要知道我哪里出了问题，以及我可以做些什么来解决它。

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

如果有任何帮助，我将不胜感激

span.drop_alaska {
  border-bottom: thin dotted;
  background: #ffeedd;
}
span.drop_alaska:hover {
  text-decoration: none;
  background: #ffffff;
  z-index: 6;
}
span.drop_alaska span {
  position: absolute;
  left: -9999em;
  margin: 2em 0 0 0em;
  padding: 1em 1em 1em 1em;
  border-style: solid;
  border-color: black;
  border-width: 1em;
  z-index: 6;
}
span.drop_alaska:hover span {
  left: 2%;
  background: #ffffff;
}
span.drop_alaska span {
  position: absolute;
  left: -9999px;
  margin: 1em 0em 0em 0em;
  padding: 1em 1em 1em 1em;
  border-style: solid;
  border-color: black;
  border-width: 1em;
}
span.drop_alaska:hover span {
  margin: 2em 0 0 5em;
  background: #ffffff;
  z-index: 6;
}
span.drop_brazil {
  border-bottom: thin dotted;
  background: #ffeedd;
}
span.drop_brazil:hover {
  text-decoration: none;
  background: #ffffff;
  z-index: 7;
}
span.drop_brazil span {
  position: absolute;
  left: -9999em;
  margin: 2em 0 0 0em;
  padding: 1em 1em 1em 1em;
  border-style: solid;
  border-color: black;
  border-width: 1em;
  z-index: 7;
}
span.drop_brazil:hover span {
  left: 2%;
  background: #ffffff;
}
span.drop_brazil span {
  position: absolute;
  left: -9999em;
  margin: 1em 0em 0em 0em;
  padding: 1em 1em 1em 1em;
  border-style: solid;
  border-color: black;
  border-width: 1em;
}
span.drop_brazil:hover span {
  margin: 2em 0 0 5em;
  background: #ffffff;
  z-index: 7;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="title" content="TSO Americas Sound Map" />
    <meta name="author" content="TSO">
    <link rel="stylesheet" type="text/css" href="mapcss.css">
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="wrapper" id="wrapper">
      <div class="americassoundmap" id="americassoundmap">
        <div class="americassoundmap_image" id="americassoundmap_image">
          <img src="http://40.media.tumblr.com/d8e8b561f67d2a68c2675b6e1baadb5f/tumblr_no76qlm55E1tyc2lxo1_500.png" alt="americassoundmap_map" usemap="#americassoundmap_map">
          <map name="americassoundmap_map">
            <span class="drop_alaska" title="alaskan_musician"><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>
              <div class="separator" id="separator">
                <span></span>
              </div>
              <span class="drop_brazil" title="brazillian_drop">
                <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>
                  </div>
                  </span>
                </span>
              </span>
            </span>
          </map>
        </div>
      </div>
    </div>
  </body>
</html>

我知道我的设置方式很愚蠢。我只需要它工作，以便我可以填写内容并在图像 map 上找到坐标。如果我做错了什么，我想知道，以便我可以自己解决。

最佳答案

我认为这里有多个问题。

首先，存在一个结构错误(“.alaskan-drop”div 没有结束标记)，但最重要的是，巴西部分嵌套在阿拉斯加部分内。那是你的意图吗？

其次，弹出窗口出现在多个地方的原因是因为您的 CSS 告诉“span.drop_alaska”跨度下的任何 s 在“.drop_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 -->

( fiddle :http://jsfiddle.net/c34h2zex/)

这是一个不再嵌套的部分:

 <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 :http://jsfiddle.net/mbg7sv86/)

(抱歉，如果这有点罗嗦，我不能只发布 fiddle URL。)但是 TL;DR:除非特别排除，否则 CSS 将影响所有子元素，这就是您的原始设置包含

关于html - 在 CSS3 中使用鼠标悬停时弹出所有图像和额外 block ，而此时只有 1 个应该，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30175542/

25 4 0
文章推荐： javascript - 绝对定位 div 的 100% 高度
文章推荐： jquery - 隐藏 HTML 复选框，但在使用自定义图像复选框时保持功能
文章推荐： html - head 标签在 HTML 代码中的位置重要吗？
文章推荐： javascript - 在 JavaScript 中使用位移或数学创建通用数据溢出函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com