マウス出力がクリック機能を無効にするのを防ぐ

Question

私は現在、クリックしたときにテキストを表示する2つの画像を持っています。 jQueryを使用して、ユーザがイメージの上を移動するときに削除されるグレースケールフィルタを適用しました。私はまた、画像をクリックすると色が変わらないように画像を設定しました。ただし、クリック機能は.mouseoutイベントから無効になっているようです。ここに私のJSFiddleです。クリックするか、この問題を回避する別の方法で.mouseoutを無効にする方法はありますか？

HTML

<div class="content"> 
    <center> 
    <div id="images"> 
     <img class="left" src="https://placeimg.com/140/200/any" alt="Left"> 
     <img class="right" src="https://placeimg.com/140/200/any" alt="Right"> 
    </div> 
    </center> 

    <div id="leftInfo"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis sit amet velit at vulputate. Etiam ornare cursus elit quis rutrum. Maecenas id iaculis libero, id fringilla arcu. Fusce feugiat tempus aliquet. Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Fusce laoreet neque quam, in semper elit sollicitudin eget. Quisque scelerisque est eu posuere rutrum. Morbi nibh elit, tincidunt vel suscipit sit amet, consectetur sit amet ex.</p> 
    <p>Aliquam erat volutpat. Nullam venenatis ex vitae metus tempor egestas. Vivamus eu enim magna. Nullam iaculis nec elit vitae lobortis. Nullam pulvinar dolor vel sollicitudin rhoncus. In hac habitasse platea dictumst. Donec auctor diam orci, sed efficitur 
     erat auctor in. Curabitur pulvinar magna id lacus sodales fringilla. Phasellus non magna dui.</p> 
    </div> 

    <div id="rightInfo"> 
    <p>Proin imperdiet, augue quis euismod interdum, orci justo sagittis odio, vulputate pellentesque orci risus id quam. Aliquam efficitur libero a lectus semper, ac egestas magna semper. Fusce at posuere eros. Duis dapibus felis mauris, non tincidunt diam 
     feugiat ultrices. Suspendisse aliquam nec urna sit amet euismod.</p> 
    <p>Phasellus urna nibh, consequat nec nulla a, vulputate pulvinar leo. Duis aliquet hendrerit magna, eget iaculis arcu tincidunt eu. Etiam lacinia tempus dui vel viverra. Morbi non lorem a dui tristique finibus sed et nulla. Cras interdum dictum accumsan. 
     Morbi at ullamcorper tellus, eu mollis dui. Suspendisse vel consequat risus. Aliquam erat volutpat.</p> 
    </div> 

jQueryの

$('#leftInfo').hide(); 
$('#rightInfo').hide(); 

$('.left').css("-webkit-filter", "grayscale(100%)"); 
$('.left').css("filter", "grayscale(100%)"); 

$('.right').css("-webkit-filter", "grayscale(100%)"); 
$('.right').css("filter", "grayscale(100%)"); 

$('.left').mouseover(function() { 
    $('.left').css("-webkit-filter", "grayscale(0)"); 
    $('.left').css("filter", "grayscale(0)"); 
}); 
$('.left').mouseout(function() { 
    $('.left').css("-webkit-filter", "grayscale(100%)"); 
    $('.left').css("filter", "grayscale(100%)"); 
}); 

$('.right').mouseover(function() { 
    $('.right').css("-webkit-filter", "grayscale(0)"); 
    $('.right').css("filter", "grayscale(0)"); 
}); 
$('.right').mouseout(function() { 
    $('.right').css("-webkit-filter", "grayscale(100%)"); 
    $('.right').css("filter", "grayscale(100%)"); 
}); 

$('.left').click(function() { 
    $('.left').css("-webkit-filter", "grayscale(0)"); 
    $('.left').css("filter", "grayscale(0)"); 
    $('.right').css("-webkit-filter", "grayscale(100%)"); 
    $('.right').css("filter", "grayscale(100%)"); 
    $('#rightInfo').hide(); 
    $('#leftInfo').fadeIn(); 
}); 

$('.right').click(function() { 
    $('.right').css("-webkit-filter", "grayscale(0)"); 
    $('.right').css("filter", "grayscale(0)"); 
    $('.left').css("-webkit-filter", "grayscale(100%)"); 
    $('.left').css("filter", "grayscale(100%)"); 
    $('#leftInfo').hide(); 
    $('#rightInfo').fadeIn(); 
}); 

Answer 1

あなたのクリックの設定を記憶するためにグローバル変数を設定する必要があります。私はここであなたのためのcodepenを作成しました： http://codepen.io/GunWanderer/pen/Lkdxjb/

var colorToRemainInEffect = ''; 

function SetColorToRemainInEffect(c) { 
    colorToRemainInEffect = colorToRemainInEffect == c ? '' : c; 
} 

function SetGrayScale(id){ 
    $('.' + id).css("-webkit-filter", "grayscale(100%)"); 
    $('.' + id).css("filter", "grayscale(100%)"); 
} 
function SetColor(id){ 
    $('.' + id).css("-webkit-filter", "grayscale(0)"); 
    $('.' + id).css("filter", "grayscale(0)"); 
} 

$('#leftInfo').hide(); 
$('#rightInfo').hide(); 

SetGrayScale('left'); 
SetGrayScale('right'); 

$('.left').mouseover(function() { 
    SetColor('left'); 
}); 

$('.left').mouseout(function() { 
    if ($(this).hasClass(colorToRemainInEffect)) SetColor('left'); 
    else SetGrayScale('left'); 
}); 

$('.right').mouseover(function() { 
    SetColor('right'); 
}); 

$('.right').mouseout(function() { 
    if ($(this).hasClass(colorToRemainInEffect)) SetColor('right'); 
    else SetGrayScale('right'); 
}); 

$('.left').click(function() { 
    SetColorToRemainInEffect('left'); 
    SetColor('left'); 
    SetGrayScale('right'); 
    $('#rightInfo').hide(); 
    $('#leftInfo').fadeIn(); 
}); 

$('.right').click(function() { 
    SetColorToRemainInEffect('right'); 
    SetGrayScale('left'); 
    SetColor('right'); 
    $('#leftInfo').hide(); 
    $('#rightInfo').fadeIn(); 
});