Изменение отображения другого класса при наведении курсора с помощью Jquery

Question

Хорошо, вот что я пытаюсь сделать. У меня есть поле DIV с дочерним элементом, установленным с помощью DISPLAY: NONE ;. Я пытаюсь использовать Jquery, чтобы, когда мышь входит в родительский блок DIV, дочерний элемент становится видимым, а затем скрывается, когда мышь покидает родительский DV. На странице будет несколько разделов с этими классами. По какой-то причине это не работает. Есть идеи? Вот мой код:

HTML:

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

Javascript:

$(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

Вы можете достичь своей цели без jQuery:

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

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

И вам, вероятно, следует использовать CSS только потому, что это устраняет необходимость в Javascript.

Проверено FF и Safari

Answer 3

Попробуйте вместо этого:

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

Answer 4

Я рекомендую вам использовать hover. Это означает, что вам нужно выполнить запрос только один раз.

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