마우스를 가져 가면 마우스가 jquery로 dom 요소를 숨 깁니다.

Question

마우스를 가져 가면 dom 요소를 숨기려고합니다. 나는 그것 밑에 div thats를 보여주고 싶다. 문제는 첫 번째 요소가 숨겨지면 jquery가 더 이상 호버를 보지 않고 호버 div를 다시 가져 오는 것입니다. 그래서 div는 정말로 빨리 토글됩니다.

마우스가 divs 영역 밖에있을 때 "앞"을 원합니다.

<div class="blockLong front" ></div> 
<div class="blockLong"></div> 

div의

는 절대 위치와 eatchother 위에 배치하고이 JQuery와입니다

같은 크기 있습니다 : 일관성을 위해

$('.front').hover(function() 
{ 
    $(this).hide(); 
}); 

$('.front').mouseout(function() 
{ 
    $(this).show(); 
}); 

Answer 1

에게, 당신은 hover 독점적으로 사용해야합니다

$('.front').hover(function(){ 
    $(this).fadeTo(500,0); 
}, function() { 
    $(this).fadeTo(500,1); 
}); 

이것은 효과적으로 각 o에 대한 처리기를 추가하는 것입니다. f mouseenter 및 mouseleave입니다. 당신이 mouseleave 이벤트가 발생했을 때 반환하는 DIV를 원하지 않는 경우

, 당신이 시도 할 수 :

$('.front').mouseenter(function(){ 
    $(this).fadeOut(500); 
}); 

$('blockLong:not(.front)').mouseleave(function(){ 
    $('.front').fadeIn(500); 
}) 

Answer 2

이 시도 :

$('.front').hover(function() 
{ 
    $(this).hide(); 
}); 

$('.back').mouseout(function() 
{ 
    $(".blockLong.front").show(); 
}); 

<div class="blockLong front"></div> 
<div class="blockLong back"></div> 

JS

Answer 3

이것은 내가 한 일입니다.

<div class="blockLong back"></div> 
<div class="blockLong front"></div> 


$('.front').hover(function() 
{ 
    $(this).hide(); 
}); 

$('.back').mouseout(function() 
{ 
    $(this).next().show(); 
});