CSS溢出可見光和z-index的

Question

我有以下的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的文字會流血，而且看起來很糟糕。在懸停期間，我需要場1來覆蓋場2。

我試過設置背景顏色，但顏色只適用於原始元素大小，而不是新顯示的溢出。我試過z-index：1000和位置：相對，無濟於事。

此外，我需要這個工作在IE 9中。

任何幫助表示讚賞。

Answer 1

問題是，您正在嘗試獲取.field的背景以擴展超過100像素，但寬度設置爲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/