フェードインとアウトのCSSホバーポップアップ

Question

画像の上にマウスを置いたときに表示される画像用のCSS専用のポップアップを実装したいと思います。たとえばin this threadのために、ここで読んだ後、私はこの解決策を考え出した：

a.tooltip span { 
    width: 250px; 
    border: #000 1px solid; 
    background: #F8F8F8; 
    display: none; 
    padding: 10px; 
    z-index: 1000000; 

    opacity: 0; 
    transition: 750ms all; 
} 
a.tooltip:hover span { 
    display: inline; 
    position: absolute; 
    top: 10px; 
    left: 25px; 
    outline: none; 
    text-decoration: none; 
    font-size: 70%; 
    color: #000; 

    opacity: 1; 
} 

しかし、この解決策は、ポップアップフェードインは、それは単に遅延なくポップアップ表示がありません。また、ユーザーがマウスカーソルをもう一度離したときにポップアップがフェードアウトするようにしたい。

私が間違ってやっていることや、むしろ代わりにやりたいことがありますか？

PS：

<a href="#" class="tooltip"> 
    <img src="questionmark.png" /> 
    <span>Tooltip Text.</span> 
</a> 

Answer 1

あなたはこのようにそれを行う必要がありますdisplay:none;を持つ要素への移行を追加することはできません：

a.tooltip span { 
    position: absolute; 
    top: 10px; 
    left: 25px; 
    width: 250px; 
    border: #000 1px solid; 
    background: #F8F8F8; 
    padding: 10px; 
    z-index: 1000000; 
    display: inline; 
    opacity: 0; 
    transition: 750ms all; 
} 
a.tooltip:hover span { 
    outline: none; 
    text-decoration: none; 
    font-size: 70%; 
    color: #000; 
    opacity: 1; 
} 

ただ、不透明度を使用する。これは、私がコードを呼び出す方法です、それは移行可能です。実際の例：https://jsfiddle.net/wbpbcyfz/1/