Jquery 防止鼠标移出禁用单击功能

我目前有两个图像，单击它们时显示文本。使用jQuery，我应用了一个灰度过滤器，当用户将鼠标悬停在图像上时，该过滤器将被删除。我还将图像设置为在单击图像时保持彩色。但是，单击功能似乎在

.mouseout

事件中被禁用。这是我的名片。是否有一种方法可以在单击时禁用

.mouseout

，或者有另一种方法可以避免此问题

HTML

---

您需要设置一个全局变量来记住单击设置。我在这里为您创建了一个代码笔：

---

您需要设置一个全局变量来记住单击设置。我在这里为您创建了一个代码笔：

---

很好！快速提问；再次单击活动图像时，如何使颜色保持活动状态？当前，当它被单击两次时，它将被禁用。然后您只需将这一行更改为：

函数setColorToRemainEffect（c）{ColorToRemainEffect=ColorToRemainEffect==c？''：c；}

即可：

函数setColorToRemainEffect（c）{ColorToRemainEffect=c；}

非常有效！快速提问；再次单击活动图像时，如何使颜色保持活动状态？当前，单击两次会禁用它。然后只需将此行更改为：

函数setColorToRemainEffect（c）{ColorToRemainEffect=ColorToRemainEffect==c？''：c；}

即可：

函数setColorToRemainEffect（c）{ColorToRemainEffect=c；}

<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>

$('#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();
});

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();
});