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

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

防止mouseout禁用单击功能

1 个答案: