Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
253 views
in Technique[技术] by (71.8m points)

html - CSS工具提示中的链接(Links in CSS Toolstips)

I've got the following problem I can't wrap my head around: For an image I created a pseudo image map via CSS to have styled tooltips which works as follows:

(我遇到了以下问题,无法解决:对于一个图像,我通过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> 

Now I would like to insert a link into this tooltip (for the term "GSA-Nummer").

(现在,我想在此工具提示中插入一个链接(术语“ GSA-Nummer”)。)

Nested links are not allowed, that is clear.

(很明显,嵌套链接是不允许的。)

Does anyone have an idea how I could accomplish this (preferably CSS/HTML only)?

(有谁知道我如何做到这一点(最好是CSS / HTML)?)

  ask by Gorly translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can't use a link inside of another link.

(您不能在另一个链接内使用一个链接。)

Change the anchor tag to a different type.

(将锚标记更改为其他类型。)

In my snippet i used span

(在我的代码段中,我使用了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> 


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...