1

なぜ子 div がフェードイン効果なしで表示されたのか理解できませんか? div（「黒」）にカーソルを合わせると、div（赤）が徐々に表示される必要があります..どうすればよいですか？

フィドル

HTML

<div class="main">
    <div class="ok"></div>  
</div>

CSS

.main {
    width: 200px;
    height: 200px;
    background: black;
}
.ok {
    width: 50px;
    height: 50px;
    background: red;
    display: none;
    -webkit-transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
    display: block;
}

ありがとう

4

1 に答える 1

0

displayプロパティを変更するときにトランジションを適用することはできません:

ディスプレイ上のトランジション: プロパティ

表示部分を削除するだけで機能します。

.ok {
    width: 50px;
    height: 50px;
    background: red;    
    transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
}

フィドル: http://jsfiddle.net/sGxgv/1/

于 2013-02-20T11:47:02.367 に答える