css - CSSトランジション-ホバーのみで要素をフェード

Question

ホバー時に要素をフェードインするが、マウスが離れると要素を非表示にするcssトランジションを使用することは可能ですか？

つまり、ホバーイン=0.5秒間フェードします| ホバーアウト=フェードなしで瞬時

Answer 1

はい、CSS3トランジションを使用してこれを実現できます。基本的に、CSSは次のようになります。

#myLink {
    opacity: 0;
}

#myLink:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

そして、ここにデモンストレーションするjsFiddleがあります：Fiddle

Answer 2

はい、:hoverリンクではなく、トランジションを設定するだけです-http://jsfiddle.net/spacebeers/X4ZqE/

（フィドルでは、リンクは「結果」ボックスの左上にあります）

#main-menu li a {
    opacity: 0;
}

#main-menu li a:hover{
    opacity: 1;    
            transition: opacity 0.5s ease-in; /* vendorless fallback */
         -o-transition: opacity 0.5s ease-in; /* opera */
        -ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
       -moz-transition: opacity  0.5s ease-in; /* Firefox */
    -webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}​