2

http://jsfiddle.net/Ru54p/

CCS3:

#wrapper {
    position: relative;
    width: 660px;
    max-width: 70%;
    background: #ccc;
    padding: 30px;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
}

.fade { 
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

html:

<div class="fade">
    <div id="wrapper">
            BLAH<BR>
            BLAH<BR>
            BLAH<BR>
    </div>
</div>

jsfiddle でわかるように、ボックスの外にカーソルを置くと、何らかの理由でフェードします...幅と関係があると思いますが、何かアイデアはありますか?

4

3 に答える 3

2

これは、内側の div、つまりクラス ラッパーを使用した div の幅が、親 div、つまりクラス フェードを使用した div の 70% しかないためです。

opacity css ie .fade を親に適用しました

したがって、内側のdivの幅を100％に増やすか、つまり

#wrapper {
    position: relative;
    width: 660px;
    max-width: 100%;
    background: #ccc;
    padding: 30px;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    }

または、ラッパーに hover プロパティを適用します。つまり、ラッパーに .fade クラスを適用します。

<div >
     <div id="wrapper" class="fade">
         BLAH<BR>BLAH<BR>BLAH<BR>
    </div>
</div>

フィドル

于 2013-03-13T12:44:46.837 に答える
0

Adivはデフォルトでブロックレベルであるため、使用可能なすべての幅を占有します。トランジションをクラスに適用していますが、それ自体だけをフェードさ.fadeせたいようです。#wrapper

.fadeブロックに背景色を適用して、何が起こっているかを説明してみてください。修正するには、不透明度などを に追加するか#wrapper、クラスに別のプロパティを設定しfadeて幅を制限します (例: に設定しますdisplay: inline-block;)。

于 2013-03-13T12:46:18.797 に答える
0

私はコードを更新しました、

あなたはdivの間違ったシーケンスを持っていました、

このフィドルをチェックしてくださいhttp://jsfiddle.net/Ru54p/3/

これでうまくいくことを願っています:)

CSS

#wrapper {
    position: relative;
    width: 660px;
    max-width: 70%;
    background: #ccc;
    padding:0;
    margin: 0 auto;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
}

.fade {
    width:100%; 
    height:100%; 
    padding:10px 10px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

HTML

<div style="background:#222">
    <br /><div id="wrapper">
    <div class="fade">
    BLAH<BR />BLAH<BR />BLAH<BR />
    </div></div>
    <br />
</div>
于 2013-03-13T12:47:55.820 に答える