javascript - Javascript を使用し、Jquery を使用しない FadeIn と FadeOut

Question

私はイメージ マップを持っています。ユーザーがマップdiv上にホバーすると、ホバーされたコンテンツに関する情報が表示された小さなフェードインが必要になり、マウスがマップを離れると 2 秒の遅延でフェードアウトします。

Answer 1

nullability が示唆するのとは異なり、遅延を含む CSS だけでこれを完全に行うことができ、追加のクラスは必要ありません。ここにそれを証明するフィドルがあります

HTML:

<div id='map'>
    <div id='overlay'></div>
</div>

CSS:

#map {
    height:100px;
    width:100px;
    background:red;
}
#overlay {
    z-index:2;
    background:black;
    height:100px;
    width:100px;
    opacity:0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
#overlay:hover {
    opacity:.8;    
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}