CSS：擴大懸停DIV沒有取代其他的div

Question

我有以下代碼：

<style> 
    #items {width:300px;} 
    .item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;} 
    .item:hover{height:auto} 
</style> 

<div id="items"> 
    <div class="item">text 1<br>text 1<br>text 1</div> 
    <div class="item">text 2<br>text 2<br>text 2</div> 
    <div class="item">text 3<br>text 3<br>text 3</div> 
    <div class="item">text 4<br>text 4<br>text 4</div> 
    <div class="item">text 5<br>text 5<br>text 5</div> 
    <div class="item">text 6<br>text 6<br>text 6</div> 
    <div class="item">text 7<br>text 7<br>text 7</div> 
    <div class="item">text 8<br>text 8<br>text 8</div> 
    <div class="item">text 9<br>text 9<br>text 9</div> 
    <div class="item">text 10<br>text 10<br>text 10</div> 
</div> 

看到它在行動： http://jsfiddle.net/6K7t4/

當一個div ID徘徊，它應該不取代其他的div擴大如圖所示： http://shopping.kelkoo.co.uk/ss-shirt.html

此外，請建議如何實現跨瀏覽器解決方案。

如果可以使用純CSS完成，我更喜歡這個解決方案。

如果沒有，是否可以使用jquery以簡單的方式完成而無需插件？

Answer 1

看到這個演示：http://jsfiddle.net/6K7t4/24/

HTML：

<div id="items">  
    <div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div> 
    <div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div> 
    <div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div> 
    <div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div> 
    <div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div> 
    <div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div> 
    <div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div> 
    <div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div> 
    <div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div> 
    <div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div> 
</div> 

CSS：

#items { 
    width:300px; 
} 

.item { 
    width:100px; 
    border:solid 1px #ccc; 
    float:left; 
    height:20px; 
    z-index:0; 
    overflow:hidden; 
    position:relative; 
} 

.item:hover { 
    overflow:visible; 
    z-index:100; 
} 

.item:hover .inner { 
    z-index: 100; 
} 

.inner { 
    position: absolute; 
    background: white; 
    width: 100%; 
} 

每個.item現位於相對並具有新的子它包裝它裏面的所有內容。一旦div被徘徊，.item的overflow:hidden被更改爲overflow:visible，並且.inner的z-索引被設置爲100（以便將其顯示在其他div上方）。

UPD：新的演示和更新的代碼。對於IE7（z-index更改爲.item：hover，否則內部div會隱藏在IE7中其他.item s以下）

Answer 2

您可以用小javascript來實現它。見下文，

$('.item').hover(function() { 
    var pos = $(this).position();   
    var $clone = $(this).clone(); 
    $clone.appendTo(this).addClass('item_clone').css({ 
     left: pos.left, 
     top: pos.top 
    }); 
}, function() { 
    $('.item_clone', this).remove(); 
}); 

DEMO：http://jsfiddle.net/6K7t4/32/

注：根據檢查其他CSS的答案是總是比通過腳本實現的更好。

Answer 3

您可以使用child selector element通過添加另一個div與您想要選擇的類。以下是您使用它更新的代碼。希望這可以幫助！

<div id="items"> 
    <div class="item"><div class="item-extend"> 1<br>text 1<br>text 1</div></div> 
    <div class="item"><div class="item-extend"> 2<br>text 2<br>text 2</div></div> 
    <div class="item"><div class="item-extend"> 3<br>text 3<br>text 3</div></div> 
    <div class="item"><div class="item-extend"> 4<br>text 4<br>text 4</div></div> 
    <div class="item"><div class="item-extend"> 5<br>text 5<br>text 5</div></div> 
    <div class="item"><div class="item-extend"> 6<br>text 6<br>text 6</div></div> 
    <div class="item"><div class="item-extend"> 7<br>text 7<br>text 7</div></div> 
    <div class="item"><div class="item-extend"> 8<br>text 8<br>text 8</div></div> 
    <div class="item"><div class="item-extend"> 9<br>text 9<br>text 9</div></div> 
    <div class="item"><div class="item-extend"> 10<br>text 10<br>text 10</div></div> 
</div> 

#items {width:300px;} 
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;} 
.item:hover >.item-extend {position:absolute;width:100px;background:#fff;} 

您可以在這裏演示的更新代碼：http://jsfiddle.net/6K7t4/35/

UPDATE：你甚至必須使用child selector element，而不是你可以僅通過改變它的:hover用.item-extend:hover轉出.item:hover >.item-extend。以完全相同的方式工作。

Answer 4

你需要一個額外的div來保存一個絕對定位的裏面。

HTML

<div id="items"> 
    <div class="itemHolder"><div class="item">text 1<br>text 1<br>text 1</div></div> 
</div> 

項目是絕對的，itemHolder漂浮。

CSS

#items {width:300px; padding:30px;} 

// Floats and hides content with height and overflow 
.itemHolder {float:left; width:100px; border:solid 1px #ccc; height:20px; overflow:hidden; position:relative;} 

// Absolute 
.item {position:absolute; top:0; left:0; z-index:1; width:100%; background:#FFF; border:1px solid #999; border-top:0;} 

// On hover we make the overflow visible and give the div to show a higher z index 
.itemHolder:hover {overflow:visible;} 
.itemHolder:hover .item {z-index:2;} 

Live解決方案在這裏：http://jsfiddle.net/vWGCc/

:)