Prevent mouseout from disabling click function

Question

I currently have two images that display text upon clicking them. Using jQuery, I have applied a grayscale filter that is removed when the user hovers over the image. I have also set the image to remain in colour upon clicking the image. However, the click function seems to be getting disabled from the .mouseout event. Here is my JSFiddle. Is there a way to disable the .mouseout on click or another way that avoids this issue all together?

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

You need to set a global variable to remember your click settings. I created a codepen for you here: 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();
});