Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css: expand div on hover without displacing other divs

Tags:

jquery

css

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?

like image 276
Arnold Avatar asked Nov 29 '12 16:11

Arnold


2 Answers

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.

like image 44
JCBiggar Avatar answered Sep 17 '22 06:09

JCBiggar


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 .items in IE7)

like image 71
Viktor S. Avatar answered Sep 17 '22 06:09

Viktor S.