ホバーにイメージフェード効果を与える方法は？

Question

子divの上にマウスを置いたときに、親divのフェードホバー変更を行う方法は？ ホバーがフェード効果を持ち、親divの背景イメージを変更したいと思います。変化は非常に速く起こっています。私は変化が起こるのをゆっくりとスムーズにしたい。

<script> 
 
\t \t $('#hoverdiv').on('mouseover', function(){ 
 
    $(this).parent().addClass('is-hover'); 
 
}).on('mouseout', function(){ 
 
    $(this).parent().removeClass('is-hover'); 
 
}) 
 
\t </script>

.bground { 
 
    width:100%; 
 
    position:relative; 
 
    background: url(../img/bg1.jpg) no-repeat top center; 
 
} 
 

 
.bground:after { 
 
\t content: url(../img/bg2.jpg); 
 
\t width:0; 
 
\t height:0; 
 
\t display:none; 
 
} 
 

 
.is-hover { 
 
    background: url(../img/bg2.jpg) no-repeat top center; 
 
} 
 

 
#hoverdiv 
 
{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t margin:0 auto; 
 
\t padding:0; 
 
}

<section id="bground" class="bground"> 
 
    <div id="hoverdiv"> 
 
    <div class="display"> 
 
    <img src="img/logo.png" alt="Logo"> 
 
    </div> 
 
    <div class="page-scroll"> 
 
    <a href="#about" class="btn btn-circle" style="color:#000000"> 
 
     <i class="fa fa-angle-double-down animated"></i> 
 
    </a> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

あなたはスローダウンすることはできませんJSでクラスの追加と削除されます。あなたは何ができるか

は、CSSのトランジションを追加で

.is-hover { 
    background: url(../img/bg2.jpg) no-repeat top center; 
    transition:all ease-in-out 0.3s; 
    -moz-transition:all ease-in-out 0.3s; 
    -ms-transition:all ease-in-out 0.3s; 
    -o-transition:all ease-in-out 0.3s; 
    -webkit-transition:all ease-in-out 0.3s; 
} 

それはすべてのブラウザで動作させるために-moz-、-webkit-などのように接頭辞を追加することが重要です。

Answer 2

javascriptの必要はありません。あなたは簡単にCSSの遷移と、これを達成することができます：私は子供のdiv要素の助けを借りて、親のdivを変更することができる午前上記のjsと

.bground { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center; 
 
    position: relative; 
 
} 
 

 
.bground:after { 
 
    content: ""; 
 
    background: url("http://placehold.it/300x200/ff0000") no-repeat top center; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all .3s; 
 
} 
 

 
.bground:hover:after { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="bground"></div>

Answer 3

.bground { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center; 
 
    position: relative; 
 
} 
 

 
.bground:after { 
 
    content: ""; 
 
    background: url("http://placehold.it/300x200/ff0000") no-repeat top center; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all .5s linear 0s; 
 
} 
 

 
.bground:hover:after { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    color:#fff; 
 
}

<div class="bground"></div>