9

私は次のコードを持っています:

<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 を使用して実行できますか?

4

4 に答える 4

16

このデモを参照してください: 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 がホバーされると、が に変更され、z-index が100 に設定されます (他.itemの div の上に表示するため)。overflow:hiddenoverflow:visible.inner

UPD : 新しいデモと更新されたコード。IE7 の場合 (.item:hover の z-index が変更されます。それ以外の場合、内部 div は.itemIE7 の他の s の下に隠されます)

于 2012-11-29T16:28:20.123 に答える
4

child selector element選択したいクラスに別の div を追加することで使用できます。以下は、それを使用して更新されたコードです。お役に立てれば！

<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>

</p> 

 #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

于 2012-11-29T16:35:59.403 に答える
3

内部に絶対位置の div を保持するには、追加の 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/

:)

于 2012-11-29T16:42:55.023 に答える
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();
});

デモ: http://jsfiddle.net/6K7t4/32/

注：スクリプトを介して達成するよりも常に優れている他のCSSベースの回答を確認してください。

于 2012-11-29T16:34:01.913 に答える