1

別の画像がホバーされているときに画像を表示しようとしています。Safari ではすべて正常に動作しますが、Chrome と Firefox では効果が機能し、画像のプレースホルダーが表示されますが、画像の読み込みに失敗します。私は他の場所を検索し、visibility:hidden などに関するトピックを見つけましたが、この問題のクロスブラウザーを扱うものはありません。

HTMLは次のとおりです。

    <div class="profile-picture-wrap">
<a class="propic">
<img src="../images/propicsmall.jpg" width="142" height="194">
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a>
</div>

CSS は次のとおりです。

    .propic span{
position:absolute;
padding: 5px;
top: 10px;
left: 10px;
display: none;
color: black;
text-decoration: none;
     }

    .profile-picture-wrap:hover .propic span{
display: block;
position:absolute;
top: -3px;
right: 900px;
left:  640px;

     }

本当にありがとうございました。

4

3 に答える 3

1

私はあなたのサンプル コードを試してみました...小さな編集の後、Chrome で正常に動作するようです。

パスを ../images/image.jpg から images/image.jpg に変更する必要がありました

Chrome の開発者ツールを使用して、リソース (画像) が適切に読み込まれているかどうかを確認しましたか?

于 2012-06-04T12:27:04.443 に答える
0

画像は、.jpg に名前が変更された .tiff ファイルであることが判明しました。Chrome と Firefox はこれを好まないようで、それらを取得可能なファイルとして認識することを拒否しました。

于 2015-03-15T01:57:38.937 に答える
0

z-index を .propic span css に追加し、ホバー後にスパンの左右を変更して、jsfiddle ウィンドウで適切に表示されるようにしました。

ここで確認してください：http://jsfiddle.net/UH54X/1/

それがあなたを助けるかどうかはわかりません。私はあなたがこのようにしたいだけだと思います。

于 2012-06-04T12:20:40.597 に答える