2012-07-14 96 views
1

我有圖像鏈接到我的網站上的文字。文本顯示爲鏈接,當在圖像上方懸停時出現在屏幕上的固定位置並在其下方顯示文字來描述它。我希望圖像下方的文字看起來很平坦,沒有下劃線。它在IE9,Chrome和Firefox中執行,但不在Safari中執行。文本鏈接的HTML看起來像這樣: -如何停止Safari鏈接圖像中的下劃線文字?

<p><a class="thumbnail" href="#thumb">Basil Thomas Stirratt<span><img src="images/basil  stirrat.jpg" width="200" height="299" alt="" /><br />Basil Thomas Stirratt<br />taken June 1940</span></a>, who was 18 at the time, had been......</p> 

的CSS是這樣的: -

.thumbnail{ 
background-color:#FFFF00; 
position:static; 
z-index: 0} 

.thumbnail:hover{ 
background-color:#CCCCCC; 
z-index: 50} 

.thumbnail span{ /*CSS for enlarged image*/ 
position:fixed; 
background-color:#99CCFF; 
padding:5px; 
left: -1000px; 
border: 10px ridge #E0E0E0; 
visibility: hidden; 
text-decoration:none; 
text-indent:0px; 
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
color:#000000; 
text-align:center; 
-moz-box-shadow: 3px 3px 8px #333333; 
-webkit-box-shadow: 3px 3px 8px #333333; 
box-shadow: 3px 3px 8px #333333;} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px;} 

奇怪的是我似乎沒有被允許張貼的圖像來演示該問題。要查看這些圖像如何顯示,請查看我的網站[1]:http://www.wellingtont2905.co.uk/story.html,查找黃色突出顯示的文本並將光標懸停在上面。

有關我如何阻止Safari執行此操作的任何建議?

回答

2

已排序的問題。它與我的文本中標有正常鏈接的部分有關,這是我想要的。解決方案是使鏈接變成深藍色,背景與我彈出的圖像相同,然後將圖像下文本的顏色更改爲白色。這意味着文本仍然是下劃線,但是與背景顏色相同,因此您無法看到下劃線!這個對我有用!!

+0

我曾'文字'結構,並不明白什麼是跨度的問題。問題很簡單。我在anchor標籤上應用了'text-decoration:none'。 – ivkremer 2013-08-30 10:22:03