CSS 工具提示中的链接
[英]Links in CSS Toolstips
问题描述
我遇到了以下问题，我无法解决：对于图像，我通过 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ügen Sie die GSA-Nummer aus der MRL per Drag & Drop ein. </span></a></li> </ul> </body>
现在我想在这个工具提示中插入一个链接（对于术语“GSA-Nummer”）。 不允许嵌套链接，这是明确的。 有没有人知道我如何完成这个（最好只有 CSS/HTML）？
1 个解决方案
解决方案1
1 已采纳 2019-12-01 16:53:40
您不能在另一个链接内使用链接。 将锚标记更改为其他类型。 在我的片段中，我使用了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ügen Sie die <a href="#">GSA-Nummer</a> aus der MRL per Drag & Drop ein. </span></span></li> </ul> </body>
带链接的CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.