別のdivの上にマウスを置いてdivをもう一度開きます。

Question

ホーム画面のロゴにマウスを乗せて、下のdivのテキストと画像をフェードアウトさせたいと考えています。 （マウスで中断されない限り、9秒後にテキストと画像がフェードアウトします）。

あなたはwww.dgimages.co.nzこちらのホームページを見ることができます

フェージングなどのための私のJSコードは以下の通りですが、おそらくのために必要されていない私が何をしたいか：

$(document).ready(function() { 
var fade = setTimeout(function(){ 
    $("div.left-col-wrap-outer").fadeOut("slow", function() { 
      $("div.left-col-wrap-outer").remove(); 
    }); 
}, 9000); 

    $("div.left-col-wrap-outer").mouseout(function(e) { 
    fade = setTimeout(function(){ 
     $("div.left-col-wrap-outer").fadeOut("slow", function() { 
       $("div.left-col-wrap-outer").remove(); 
     }); 
    }, 9000); 
}); 

    $("div.left-col-wrap-outer").mouseover(function() { 
    clearTimeout(fade); 
    }); 

}); 

私のロゴはdivクラス= "ロゴ"にあります どうすればいいですか？

Answer 1

ホバーで内外にフェードアウトするには、CSSで完全に行うことができます。あなたが本当にあなたのjQueryを必要とする唯一の事は、あなたの最初の遅延フェードアウトをページの読み込みに費やしていることです。

トリックは実際にはかなり簡単です。外側のコンテナには、ロゴとフェードしたいコンテンツが含まれています。フェードされるコンテナは、ユーザがホバリングしてホバリングを外すときにCSSトランジションを使用してフェードインまたはフェードインされます。外側コンテナ。したがって、#logo:hoverのようなものを使用する代わりに、#outer:hover #fadeのようなものを使用することになります。

Here's a fiddle demonstrating the CSS hover fade effect。

More information about CSS transitions can be found here。

HTML：

<div id="outer"> 

    <img /> <!-- Your logo --> 

    <div id="fade"> 
     <img /> <!-- Any images you want in the faded out menu --> 
     <h3>I like bells.</h3> 
    </div> 

</div>​ 

とCSS：それは色あせた後

#outer { 
    width:120px; 
} 

#fade { 
    opacity:0; 
    -webkit-transition-property:opacity; 
    -webkit-transition-duration:1s; 
    -moz-transition-property:opacity; 
    -moz-transition-duration:1s; 
    -ms-transition-property:opacity; 
    -ms-transition-duration:1s; 
    -o-transition-property:opacity; 
    -o-transition-duration:1s; 
} 

#outer:hover #fade { 
    opacity:1; 
    -webkit-transition-property:opacity; 
    -webkit-transition-duration:1s; 
    -moz-transition-property:opacity; 
    -moz-transition-duration:1s; 
    -ms-transition-property:opacity; 
    -ms-transition-duration:1s; 
    -o-transition-property:opacity; 
    -o-transition-duration:1s; 
}