css溢出可见和z-index

Question

I have the following HTML and 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>

Preview: http://jsfiddle.net/RpLQk/

If you hover over field 1, the overflow text is shown, but since the background-color is transparent the text of field 2 bleeds through, and it looks terrible. I need field 1 to cover field 2 during hover.

I've tried setting the background-color, but the color is only applied to the original element size, not the newly displayed overflow. I've tried z-index: 1000 and position: relative, to no avail.

Also, I need this to work in IE 9.

Any help is appreciated.

Answer 1

The issue is that you're trying to get the background for .field to expand further than 100px, but the width is set to 100px . Adding an inner span will allow you to expand the background with the text.

Try this:

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>

No reason to have <span style="display: block"> , should use <div> instead.

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; }

Preview: http://jsfiddle.net/Wexcode/Vm4Xg/