CSS 工具提示中的链接答案

【问题标题】：Links in CSS ToolstipsCSS 工具提示中的链接
【发布时间】：2019-12-01 16:32:51
【问题描述】：

我遇到了以下我无法解决的问题：对于图像，我通过 CSS 创建了一个伪图像映射，以具有样式化的工具提示，其工作方式如下：

#map {
             margin:0;
             padding:0;
             width:800px;
             height:838px;
background:url(http://prntscr.com/q4nl0i) 
top left no-repeat #fff;
             font-family:"Segoe UI", arial, helvetica, sans-serif;
             font-size:10pt;
         }

         #map li {
             margin:0;
             padding:0;
             list-style:none;
         }

         #map li a {
             position:absolute;
             display:block;
                background:url(https://prnt.sc/q4no1g);
                text-decoration:none;
             color:#fff;
         }

         #map li a span { display:none; }

         #map li a:hover span {
             position:relative;
             display:block;
             width:200px;
             left:10px;
             top:-20px;
             border:1px solid #ea7d30;
             background:#323232;
             padding:5px;
              filter:alpha(opacity=80);
             opacity:0.8;
           }

         #map li a:hover span b {
             color: #ea7d30;
           }

         #map a.gsa {
             top:84px;
             left:19px;
             width:128px;
             height:67px;
         }

<html>
<head>


</head>

<body class="main">
<ul id="map">
     <li><a class="gsa" href="#"><span><b>GSA</b><br>
         F&uuml;gen Sie die GSA-Nummer aus der MRL per Drag &amp; Drop ein.
         </span></a></li>


</ul>
</body>

现在我想在此工具提示中插入一个链接（用于术语“GSA-Nummer”）。不允许嵌套链接，这很清楚。有谁知道我如何做到这一点（最好只有 CSS/HTML）？

【问题讨论】：

不要使用链接作为背景图片的包装。这解决了嵌套链接问题

标签： html css hyperlink imagemap

【解决方案1】：

您不能在另一个链接中使用一个链接。将锚标记更改为其他类型。在我的 sn-p 中，我使用了span

#map {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 838px;
  background: url(http://prntscr.com/q4nl0i) top left no-repeat #fff;
  font-family: "Segoe UI", arial, helvetica, sans-serif;
  font-size: 10pt;
}

#map li {
  margin: 0;
  padding: 0;
  list-style: none;
  height:100px;
}

#map li span {
  position: absolute;
  display: block;
  background: url(https://prnt.sc/q4no1g);
  text-decoration: none;
  color: #fff;
}

#map li span span {
  display: none;
}

#map li span:hover span {
  position: relative;
  display: block;
  width: 200px;
  left: 10px;
  top: -20px;
  border: 1px solid #ea7d30;
  background: #323232;
  padding: 5px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#map li span:hover span b {
  color: #ea7d30;
}

#map span.gsa {
  top: 84px;
  left: 19px;
  width: 128px;
  height: 67px;
}

<body class="main">
  <ul id="map">
    <li><span class="gsa" href="#"><span><b>GSA</b><br>
    F&uuml;gen Sie die <a href="#">GSA-Nummer</a> aus der MRL per Drag &amp; Drop ein.
        </span></span></li>


  </ul>
</body>

【讨论】：

邪恶！这正是我一直在寻找的。谢谢一堆。我的印象是那些锚标签是强制性的。在过去的 20 年里没有做太多的 HTML/CSS，所以我仍然在努力追赶:)