Jquery로 호버에 다른 클래스 디스플레이 변경

Question

자, 여기에 내가하려는 중입니다. DISPLAY : NONE;으로 설정된 자식 요소가있는 DIV 상자가 있습니다. Jquery를 사용하여 마우스가 부모 DIV 상자에 들어갈 때 자식 요소가 보이게 한 다음 마우스가 부모 DV를 떠날 때 숨 깁니다. 이 클래스에는 페이지에 여러 div가 있습니다. 어떤 이유로 그것은 작동하지 않습니다. 어떤 아이디어?

HTML :

<div class="parent"> 
    <span class="handle" style="display: none;">My Handle</span> 
    <p>Child Text</p> 
</div> 

자바 스크립트 : 대신

$(document).ready(function() { 
    $('.parent').mouseenter(function(){ 
     $(this).next('.handle').show(); 
    }); 
    $('.parent').mouseleave(function(){ 
     $(this).next('.handle').hide(); 
    }); 
}) 

Answer 1

사용 find : 여기 내 코드의 더 나은

$(document).ready(function() { 
    $('.parent').mouseenter(function(){ 
     $(this).find('.handle').show(); 
    }); 
    $('.parent').mouseleave(function(){ 
     $(this).find('.handle').hide(); 
    }); 
}) 

또는이 시도 :

$(document).ready(function() { 
    $('.parent').hover(function(){ 
     $('.handle', this).show(); 
    }, 
    function(){ 
     $('.handle', this).hide(); 
    }); 
    ); 
}) 

Answer 2

hover을 사용하는 것이 좋습니다. 즉, 쿼리를 한 번 실행하면됩니다.

.parent .handle{ 
    display:none; 
} 
.parent:hover .handle{ 
    display:inline; 
} 

<div class="parent"> 
    <span class="handle">My Handle</span> 
    <p>Child Text</p> 
</div> 

를 그리고 자바 스크립트에 대한 필요성을 제거에만 있기 때문에 당신은 아마 CSS를 사용해야합니다

$('div.parent').hover(
    function() { 
     $(this).children('span.handle').show(); 
    }, 
    function() { 
     $(this).children('span.handle').hide(); 
    } 
); 

Answer 3

당신은 jQuery를하지 않고 목표를 달성 할 수있다.

는 FF 및 사파리

Answer 4

대신,이 시도 테스트 :

$(document).ready(function() { 
    $('.parent').mouseenter(function(){ 
     $(this).next('.handle').show(); 
    }).mouseleave(function(){ 
     $(this).next('.handle').hide(); 
    }); 
})