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和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/

css溢出可见和z-index

1 个答案: