CSSでフェードアウトした後にフェードアウトする

Question

現在、友人向けのコードを作成していますが、フェーディングに問題があります。私の主な問題は、フェードアウトしてからイメージがフェードインすることです。私のマウスがイメージの上を浮遊しなくなると、不透明度は正常に戻ります。しかし、フェージングではなく、瞬間的な遷移であり、とても見栄えが悪いものです。

.top { 
    width: 580px; 
    height: 250px; 
    background-image: 
    url(http://i.imgur.com/RSelpFd.png); 
} 
div:hover { 
    opacity: 0; 
    filter: alpha(opacity=50); 
    transition: all 1s ease; 
} 

私はこれを行うには、他の方法があるけど、私はまだ、私は実際にそれらを理解していないので、コーディングに新しいので、私は私が仕事をしてきたものを作るための方法があった期待していました。ヘルプのお時間をありがとうございます。

Answer 1

JQueryは必要ありません。それは非常にシンプルなCSSの実装です。

希望すると、これが役立ちます。

https://jsfiddle.net/pablodarde/ggn89rp9/

HTML

<div class="top"></div> 

CSS

.top { 
    width: 580px; 
    height: 250px; 
    opacity: 1; 
    filter: alpha(opacity=1); 
    transition: all 1s ease; 
    background-image: 
    url(http://i.imgur.com/RSelpFd.png); 
} 
div:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

Answer 2

このバイオリンを試してみてください https://jsfiddle.net/1c6s90wm/

divにhoverを渡すのではなく、そのクラスに渡してください。それ以外の場合は、すべてのdivタグに適用されます。

<div class="top"></div> 


.top { 
    width: 580px; 
    height: 250px; 
    background-image: 
    url(http://i.imgur.com/RSelpFd.png); 
    // opacity: 1; 
    transition: all 1s ease; 

} 
.top:hover { 
    opacity: 0; 
    filter: alpha(opacity=50); 
} 

Answer 3

jqueryを使用すると助かります。

$(document).ready(function(){ 
    $(document).on('mouseover','div',function(){ 
     $(this).css('opacity',0); 
     $(this).css('filter','alpha(opacity=50)'); 
     $(this).css('transition','all 1s ease'); 
    }); 
}); 

「ホバー」がjqueryの「mouseover」に変更されていることに注意してください。