Empêche le passage du curseur de désactiver la fonction de clic

Question

J'ai actuellement deux images qui affichent du texte en cliquant dessus. À l'aide de jQuery, j'ai appliqué un filtre en niveaux de gris qui est supprimé lorsque l'utilisateur survole l'image. J'ai également mis l'image à rester en couleur en cliquant sur l'image. Toutefois, la fonction de clic semble être désactivée à partir de l'événement .mouseout. Voici mon JSFiddle. Y at-il un moyen de désactiver le .mouseout sur un clic ou d'une autre manière qui évite ce problème tous ensemble?

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

Vous devez définir une variable globale pour rappeler vos paramètres de clic. J'ai créé un codepen pour vous ici: 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(); 
});