jquery - フェードイン フェードアウトの背景画像

Question

ここでは、リンクjsfiddle.net/swati712/4Zx5qを提供しています。左上にある緑色の円をクリックするとわかるbuttonように、背景画像がフェードイン jquery 関数として表示され、画像領域の外に出ると、その画像が表示されます。フェードアウトして灰色の背景が再現されました。しかし今、誰かが灰色の領域にマウスを置いたときに、緑色のボタンをクリックするだけでなく、画像が表示されるようにしたいと考えています。私はそれが非常に単純な作業であることを知っていますが、これに関して助けが必要です.

Answer 1

背景色が灰色の要素にホバーハンドラーを配置したいと思います（fiddleを参照）：

$('#container').hover(function() {
    $(".main1").fadeIn();
    $(".logo").fadeOut();
    $(".logo-left").fadeIn();
}, function(){
});

ホバー機能を灰色の要素に制限することに煩わされず、ページ全体でイベントをキャッチしたい場合は、document要素をターゲットにするように jquery セレクターを変更できます。

$(document).hover(function() { /* hover code here */});

Answer 2

本質的に、灰色の背景の一部が画像でフェードすると言っていますか? あなたはこのようにします。

(function ($) {
    $ (document).ready(function () {
        //TODO: Code here
        $('#left').hover(function() {
            $(".main1").fadeIn();
            $(".logo").fadeOut();
            $(".logo-left").fadeIn();
        }, function () {
        });

        $('.hide').hover(function () {
        }, function () {
            $(this).fadeOut();
            $(".logo").fadeIn();
            $(".logo-left").fadeOut();
        });
    });
})(jQuery);

Answer 3

このフィドルを試してください：

http://jsfiddle.net/Hive7/4Zx5q/8/

Jクエリ:

(function($) {
    $ (document).ready(function(){
        //TODO: Code here
        $('.main').hover(function() {
            $(".main1").fadeIn();
            $(".logo").fadeOut();
            $(".logo-left").fadeIn();
        }, function(){
        });

        $('.hide').hover(function() {
        }, function(){
            $(this).fadeOut();
            $(".logo").fadeIn();
            $(".logo-left").fadeOut();
        });
    });


})(jQuery);