0

名前を縦に表示しています。基本的に、これは私のhtmlページの構造です。

<div>                                  <div/>
  <a>name<span>Details</span></a>          <a>name<span>Details</span></a>      
  <a>name<span>Details</span></a>         <a>name<span>Details</span></a>
</div>                                 </div>

したがって、各「a」タグには名前が含まれ、span タグにはその名前に関する詳細が含まれます。span タグの表示属性は、最初は「none」に設定されており、「a」タグの内容にマウスを合わせると「block」に変更されます。問題は、スパン タグのコンテンツが IE8 で切り捨てられることです。Firefox と chrome で正常に動作します。

私のCSSファイル：

#tooltip1 { position: relative; }
#tooltip1 a{text-decoration: none; color:#000000;} 
#tooltip1 a span { display: none; color: #FFFFFF; }    
#tooltip1 a:hover span { display: block; position: absolute; 
                         background-color: #aaa; color: #FFFFFF; 
                         padding: 5px; height: 10px; 
                         width:500px; }

この画像の「OMA」にマウスを合わせると、「OMAHA NEBRASKA」ではなく「OMAHA」しか表示されません。IE ですべてのテキストを表示するにはどうすればよいですか? 「オーバーフロー」属性を使用してみましたが、うまくいきませんでした。

私のシステムでどのように見えるかの写真

これは、 http: //jsfiddle.net/7s4Np/10/ を見たい場合にすべてのコードを含む jsfiddle へのリンクです。

4

2 に答える 2

1

z-indexをa：hoverspanに適用してみてください

#tooltip1 a:hover span{ z-index:5; }

ツールチップは、フロー内の次の相対要素の背後に隠されており、不透明な背景色が含まれていると思います。

于 2012-11-01T16:53:39.107 に答える
0

問題は、div タグに適用されたクラス .container の css にありました。ここでの私の質問には、.container クラスを適用する div は示されていませんが、投稿した jsfiddle リンクに示されています。

ここに問題がありました： 

.container {width: 100px; float: left; overflow: hidden; padding: 10px;}

「overflow: hidden」属性を削除したところ、魅力的に機能しました。

これを解決するための以前の試みでは、「overflow: visible」を子要素 (span タグ) に適用しました。子要素の値(オーバーフロー: 可視) は、親要素で定義された値(オーバーフロー: 非表示) を超えるはずではないですか?

とにかく、お時間をいただきありがとうございました。

于 2012-11-02T16:49:28.927 に答える