Question

我的图片链接到我网站上的文字。文本看起来像一个链接，当悬停在图像上时，它出现在屏幕上的固定位置，下面有文字来描述它。我希望图像下的文字显得简洁，没有下划线。它适用于IE9，Chrome和Firefox，但不适用于Safari。文本链接的html如下所示： -

    <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执行此操作的任何建议？

Answer 1

已对问题进行了排序。它与在我的文本中加下划线的普通链接有关，我想要它。解决方案是将链接设为深蓝色，背景为弹出的图像为蓝色，然后将图像下的文本颜色更改为白色。这意味着文本仍然带有下划线，但颜色与背景颜色相同，因此您无法看到下划线！它对我有用!!

如何阻止Safari在链接图像中下划线文字？

1 个答案: