CSSのオーバーフロー可視およびZインデックス

Question

I持って次のHTMLとCSS：

<style> 
.field { display: inline-block; width: 100px; overflow: hidden; white-space: nowrap; margin-left: 15px; } 
.field:hover { overflow: visible; z-index: 100; } 
</style> 

<span style="display: block; white-space: nowrap;"> 
<span class="field"> field 1 - Some long text in here that gets cut off.</span> 
<span class="field"> field 2 - Some long text in here that gets cut off.</span> 
</span> 

プレビュー：http://jsfiddle.net/RpLQk/

あなたはフィールド1の上に置くと、オーバーフローテキストが表示されますが、以来、バックグラウンド色は透明で、フィールド2のテキストが流出し、ひどく見えます。私はホバーの間にフィールド2をカバーするためにフィールド1が必要です。

背景色を設定しようとしましたが、色は元の要素サイズにのみ適用され、新たに表示されるオーバーフローには適用されません。 z-index：1000とposition：relativeを試してみました。

はまた、私は、これはすべてのヘルプは高く評価され、IE 9

で作業する必要があります。

Answer 1

.fieldの背景を100px以上に広げようとしていますが、幅は100pxに設定されています。内部スパンを追加すると、テキストで背景を拡大することができます。

これを試してみてください：

HTML：

<div class="wrapper"> 
    <span class="field"><span>field 1 - Some long text in here that gets cut off.</span></span> 
    <span class="field"><span>field 2 - Some long text in here that gets cut off.</span></span> 
</div> 

<span style="display: block">を持っている理由はない、代わりに<div>を使用する必要があります。

CSS：

body { background: #ccc; } 
.wrapper { white-space: nowrap; } 
.wrapper .field { 
    width: 100px; 
    overflow: hidden; 
    display: inline-block; } 
.wrapper .field:hover { 
    position: relative;  
    overflow: visible; } 
.wrapper .field span { background: #fff; } 

プレビュー：http://jsfiddle.net/Wexcode/Vm4Xg/