CSS 工具提示中的链接

Question

我遇到了以下无法解决的问题：对于图像，我通过 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>

现在我想在此工具提示中插入一个 link（对于术语 "GSA-Nummer"）。嵌套 link 是不允许的，这是明确的。有谁知道我如何完成这个（最好只 CSS/HTML）？

Answer 1

您不能在另一个 link 中使用 link。将锚标记更改为不同的类型。在我的代码片段中，我使用了 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>

CSS 工具提示中的链接

Links in CSS Toolstips

html

css

imagemap

hyperlink