mouseoutの画像を表示

Question

私はこれを持っていますhttps://jsfiddle.net/mLa313px/27/

私は画像といくつかのリンクを持っています。私が画像上にマウスを置くと、いくつかのcss3スケーリングが行われます。私が画像をクリックすると、私はクリックした画像を隠してリンクを表示し、現在表示されているリンクのmouseoutでクリックした画像を表示したい。

これはどのように私はそれを行うための私のコードを向上させることができ、これまで

$(".linkso").addClass('hide'); 
$(".flood").hover(function() { 
     $(".flood").addClass('transition'); 
    }, function() { 
     $(".flood").removeClass('transition'); 
     $(".linkso").addClass('hide'); 
    }); 

$(".flood").click(function() {  
    if ($(".linkso").hasClass("hide")) { 
    $(".linkso").removeClass('hide'); 
    } 
}); 

コードです？。

Answer 1

$(".linkso").addClass('hide'); 
$(".flood").hover(function() { 
     $(".flood").addClass('transition'); 
    }, function() { 
     $(".flood").removeClass('transition'); 
    }); 

$(".flood").click(function() {  
    if ($(".linkso").hasClass("hide")) { 
    $(".linkso").removeClass('hide'); 
    } 
}); 

here is the modified fiddle

Answer 2

あなたはクリックで画像を非表示にする場合、あなたは、CSSにvisibilityプロパティを使用する必要があります。

CSS：

.visibilityHide{ 
    visibility: hidden; 
} 

更新フィドル：https://jsfiddle.net/mLa313px/29/