CODEWITHSUNDEEP
jquerycss
Arnold
Arnold

Reputation: 495

css: expand div on hover without displacing other divs

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?

Upvotes: 9

Views: 27781

Answers (4)

Viktor S.
Viktor S.

Reputation: 12815

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)

Upvotes: 16

JCBiggar
JCBiggar

Reputation: 2507

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.

Upvotes: 4

ignacioricci
ignacioricci

Reputation: 1286

You need an extra div in order to hold an absolute-positioned one inside.

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.

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/

:)

Upvotes: 3

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79860

You can achieve it with little javascript. See below,

$('.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/

Note: Check other CSS based answers which is always better than achieving it via scripts.

Upvotes: 2

Related Questions