防止mouseout禁用点击功能

Question

我目前有两张图片在点击时会显示文字。使用 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

您需要设置一个全局变量来记住您的点击设置。我在这里为你创建了一个代码笔： 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();
});

防止mouseout禁用点击功能

Prevent mouseout from disabling click function

html

jquery

click

mouseout

imagefilter