我有以下代码:
<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吗?
答案 0 :(得分:15)
请参阅此演示: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
的{{1}}将更改为overflow:hidden
,而overflow:visible
的z-index将设置为100(以便将其显示在其他div之上)。
UPD :新的演示和更新的代码。对于IE7(z.index更改为.item:悬停,否则内部div隐藏在IE7中的其他.inner
下面)
答案 1 :(得分:4)
您可以使用您想要选择的类添加另一个div来使用child selector element
。以下是使用它更新的代码。希望这有帮助!
<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/
更新:您甚至不必使用child selector element
,而只需通过:hover
切换.item:hover >.item-extend
即可在.item-extend:hover
上更改{{1}} }。工作方式完全相同。
答案 2 :(得分:3)
你需要一个额外的div来保持一个绝对定位的内部。
HTML
<div id="items">
<div class="itemHolder"><div class="item">text 1<br>text 1<br>text 1</div></div>
</div>
item是绝对的,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;}
现场解决方案:http://jsfiddle.net/vWGCc/
:)
答案 3 :(得分: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的答案,这总是比通过脚本实现答案更好。