我有以下代码:
<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 来完成?