마우스 출력으로 클릭 기능이 비활성화되지 않도록하십시오.

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