0

divのグループにデフォルトの幅を設定する方法はありますが、CSSだけで順序に関係なく各幅を変更しますか？JSFiddleの例はhttp://jsfiddle.net/RfHSA/にあります。

各divをに設定しようとしていwidth:20%ますが、マウスで内側のdivの1つにカーソルを合わせると、特定のdivをに設定しwidth:72%、他のdivをに設定する必要がありwidth:7%ます（HTML構造でその前にあるものを含む） 。これはCSSだけで可能ですか、それともJavascipt / jQueryが必要ですか？

編集：私が達成しようとしていることの例はここにあります：http ：//www.kriesi.at/themes/newscast/

4

4 に答える 4

3

私はあなたのニーズに簡単な解決策をお勧めしたいと思います：http：//jsfiddle.net/linmic/qcnmu/1/

display：tableを「listwrapper」に適用し、display：table-cellを「outerbox」に適用するだけで、すべてが完全に機能します。

乾杯

于 2012-05-25T19:30:44.977 に答える
1

あなたは99％そこにいました：http：//jsfiddle.net/RfHSA/2/

.featuredwrapper {
    width:100%;
    height:350px;
    margin:auto;
    background-color:rgba(0,0,0,0.5);
    padding-top:12px;
    position:relative;
}

.listwrapper {
    width:95%;
    max-width:1100px;
    height:325px;
    margin:auto;
    position:relative;
}

.listwrapper:hover .outerbox {
    width:7%;
}
.outerbox {
    width:20%;
    height:100%;
    display:inline-block;
    background-color:#e8e8e8;
    margin-left:-4px;
    box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
    -webkit-transition: width .3s ease-out;    
}

.listwrapper:hover .outerbox:hover {
    width:72%;
}

.outerbox:first-child{
    margin-left:0px;
}

.hoveractive {
    position:absolute;
    width:95%;
    height:325px;
    z-index:1000;
    padding-top:12px;
}

私はそれらをすべて誤って閉じることを最小限に修正しました、私は％幅に関連する小数幅に関連する残りの問題だと思います...

于 2012-05-25T19:19:14.543 に答える
0

http://jsfiddle.net/RfHSA/15/

これがスクリプトの動作バージョンです。それを機能させるには、ここでJavaScriptを操作する必要があります。私はできるだけ使用を少なくしようとしました、そしてあなたが結果からわかるように、それは少し不安定です、しかしうまくいけばそれはあなたを正しい軌道に乗せるでしょう。

編集：まあ、私は試しましたが、他の人の解決策はより良いです= P

于 2012-05-25T19:44:18.530 に答える
0

時期尚早の崩壊を防ぐために更新されました

CSSを微調整すると、この解決策が得られました（fiddleを参照）。トップエントリからの時期尚早の崩壊を防ぐために、padding-topからに移動する必要があります。.listwrapper.featuredwrapper

CSSを微調整

.outerbox {
    width:20%;
    height:100%;
    display:inline-block;
    background-color:#e8e8e8;
    margin-left:-4px;
    box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
    -webkit-transition: width .3s ease-out;    
}

/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after { 
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -2px;
}

.listwrapper:hover .outerbox {
    width: 7%;
}

.listwrapper .outerbox:hover {
    width:72%;
}
于 2012-05-25T20:02:33.340 に答える