2

我的网站中有链接到文本的图像。文本看起来像一个链接，当将鼠标悬停在图像上时，它会出现在屏幕上的固定位置，其下方有文字来描述它。我希望图像下的文本看起来很简单，没有下划线。它适用于 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 执行此操作的任何建议？

4

1 回答 1

2

已经把问题整理好了。这与我想要的在我的文本中加下划线的正常链接有关。解决方案是将链接设置为深蓝色，将弹出图像的背景设置为相同的蓝色，然后将图像下方的文本颜色更改为白色。这意味着文本仍然带有下划线，但与背景颜色相同，因此您看不到下划线！这个对我有用！！

于 2012-07-14T17:54:10.517 回答