jQuery css：悬停时展开 div 而不替换其他 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13629967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: expand div on hover without displacing other divs
提问by Arnold
I have the following code :
我有以下代码：
<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>
see it in action : http://jsfiddle.net/6K7t4/
看看它在行动：http: //jsfiddle.net/6K7t4/
when a div id hovered, it should expand without displacing other divs as shown at : http://shopping.kelkoo.co.uk/ss-shirt.html
当一个 div id 悬停时，它应该在不取代其他 div 的情况下展开，如下所示：http: //shopping.kelkoo.co.uk/ss-shirt.html
Also, please suggest how to achieve a cross-browser solution.
另外，请建议如何实现跨浏览器解决方案。
If it can be done using pure css, I prefer that solution.
如果可以使用纯 css 来完成，我更喜欢该解决方案。
If not, can it be done using jquery in an easy way without plugins?
如果没有，是否可以在没有插件的情况下以简单的方式使用 jquery 完成？
回答by Viktor S.
See this demo: http://jsfiddle.net/6K7t4/24/
看这个演示：http: //jsfiddle.net/6K7t4/24/
HTML:
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:
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%;
}
Each .itemis now positioned relatively and has new child which wraps all content inside it. Once div is hovered, .item's overflow:hiddenis changed to overflow:visibleand z-index of .inneris set to 100 (in order to show it above other divs).
每个.item现在都相对定位，并且有一个新的子项，它将所有内容包装在其中。一旦 div 悬停，.item'soverflow:hidden将更改为overflow:visible并且 z-index of.inner设置为 100（以便将其显示在其他 div 上方）。
UPD: New demo and updated code. For IE7 (z-index is changed for .item:hover, otherwise inner div is hidden below other .items in IE7)
UPD：新的演示和更新的代码。对于 IE7（z-index 更改为 .item:hover，否则内部 div 隐藏.item在 IE7中的其他s之下）
回答by JCBiggar
You can use the child selector elementby adding another div with the class you would like to select. Here is your code updated below using it. Hope this helps!
您可以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;}
You can demo the updated code here : http://jsfiddle.net/6K7t4/35/
您可以在此处演示更新的代码：http: //jsfiddle.net/6K7t4/35/
UPDATE:you dont even have to use the child selector element, instead you can just change it on :hoverby switching out .item:hover >.item-extendwith .item-extend:hover. Works the exact same way.
更新：你甚至不必须使用child selector element，而不是你可以改变它:hover切换出.item:hover >.item-extend有.item-extend:hover。工作方式完全相同。
回答by ignacioricci
You need an extra div in order to hold an absolute-positioned one inside.
您需要一个额外的 div 才能在里面保存一个绝对定位的 div。
HTML
HTML
<div id="items">
<div class="itemHolder"><div class="item">text 1<br>text 1<br>text 1</div></div>
</div>
item is absolute, and itemHolder floats.
item 是绝对的， itemHolder 浮动。
CSS
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 solution here: http://jsfiddle.net/vWGCc/
? 现场解决方案：http: //jsfiddle.net/vWGCc/
:)
:)
回答by Selvakumar Arumugam
You can achieve it with little javascript. See below,
你可以用很少的 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/
演示：http : //jsfiddle.net/6K7t4/32/
Note:Check other CSS based answers which is always better than achieving it via scripts.
注意：检查其他基于 CSS 的答案，这总是比通过脚本实现更好。
