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;}

奇妙なことに、問題を示すために画像を投稿することは許可されていないようです。これらの画像がどのように表示されるかを確認するには、私の Web サイト [1]: http://www.wellingtont2905.co.uk/story.htmlをチェックしてください。黄色で強調表示されたテキストを探し、カーソルをその上に置きます。

Safariがこれを停止する方法について何か提案はありますか?

4

1 に答える 1

2

問題を整理しました。これは、テキスト内で通常のリンクに下線を引くことに関係しています。解決策は、リンクを濃い青にし、ポップアップ画像の背景を同じ青にしてから、画像の下のテキストの色を白に変更することでした. これは、テキストにはまだ下線が引かれていることを意味しますが、背景と同じ色であるため、下線が見えません! わたしにはできる！！

于 2012-07-14T17:54:10.517 に答える