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/
when a div id hovered, it should expand without displacing other divs as shown at : 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.
If not, can it be done using jquery in an easy way without plugins?
You can use the child selector element
by adding another div with the class you would like to select. Here is your code updated below using it. Hope this helps!
<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/
UPDATE: you dont even have to use the child selector element
, instead you can just change it on :hover
by switching out .item:hover >.item-extend
with .item-extend:hover
. Works the exact same way.
See this demo: 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%;
}
Each .item
is now positioned relatively and has new child which wraps all content inside it. Once div is hovered, .item
's overflow:hidden
is changed to overflow:visible
and z-index of .inner
is set to 100 (in order to show it above other divs).
UPD: New demo and updated code. For IE7 (z-index is changed for .item:hover, otherwise inner div is hidden below other .item
s in IE7)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With