jQuery 마우스 센터가 깜박임

Question

나는 이미지 위에 롤오버 할 때 이미지 위에 텍스트 블록이 표시되는 사이트가 있습니다.

커서가 이미지 위에있는 새 텍스트 요소 위에 있으면 모든 것이 깜박이기 시작합니다.

도움을 주시면 감사하겠습니다. http://jsfiddle.net/aRSw2/

Here's the JS: 

$('.campaign-1').on('mouseenter', function(){ 
    $(this).addClass('campaign-hover'); 
    $('.cta').show(); 
}); 
$('.campaign-1').on('mouseleave', function(){ 
    $('.campaign-hover').removeClass('campaign-hover'); 
    $('.cta').hide(); 
}); 

Answer 1

다른, 당신의 span 당신의 부분에 넣어 당신의 mouseenter 및 leave이 지속적으로 깜박임의 원인이 촉발되고있다 :

<section class="campaign-1"> 
<a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"/></a> 
<span class="cta"> Hello </span> 
</section> 

데모 : http://jsfiddle.net/aRSw2/2/

Answer 2

을 여기

는 바이올린의

@tymeJV가 말한 것은 사실이지만 특정 시나리오에서는 동일한 시나리오를 수행하지 못할 수도 있습니다.

그래서 * 아래

$('.campaign-1,a').on('mouseenter', function(){ 
     $(this).addClass('campaign-hover'); 
     $('.cta').show(); 
}); 

업데이트하려고 당신의 fiddle

Answer 3

당신이 다음에 포커스를받는 새 텍스트 요소 위로 커서, 그리고 campaign 섹션 포커스를 잃을 때 문제는 (결과되었는지 확인하세요 텍스트 잃기, 캠 게인 재 획득, 텍스트 재 등장).

캠페인 요소 또는 텍스트 요소 위에 마우스를 올려 놓은 상태에서 텍스트 팝업이 계속 표시되도록 코드를 수정하십시오.

가 여기에 귀하의 바이올린에 대한 업데이트입니다 : 내 질문에 설명되지 않았지만 http://jsfiddle.net/W3wEd/

$('.campaign-1').on('mouseenter', function(){ 
    $(this).addClass('campaign-hover'); 
    updateHover(); 
}); 
$('.campaign-1').on('mouseleave', function(){ 
    $('.campaign-hover').removeClass('campaign-hover'); 
    updateHover(); 
}); 
$('.cta').on('mouseenter', function(){ 
    $(this).addClass('cta-hover'); 
    updateHover(); 
}); 
$('.cta').on('mouseleave', function(){ 
    $(this).removeClass('cta-hover'); 
    updateHover(); 
}); 

function updateHover() { 
    if ($('.campaign-1').hasClass('campaign-hover') || $('.cta').hasClass('cta-hover')) 
    { 
     $('.cta').show();   
    } else { 
     $('.cta').hide(); 
    } 
};