JQuery при наведении курсора мыши (лучшие практики)

Question

У меня есть рабочий код Jquery, чтобы добавить описательный текст в div под вопросом. Эта проблема? Решение не очень элегантное. Вот что у меня есть:

$("#home").mouseover(function() {
    $("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
    $("#homeText").fadeOut();
});

Я знаю, что есть лучший способ сделать это, я просто не уверен, что это такое.

Answer 1

вы можете использовать hover, первая функция будет действовать при наведении, а вторая - при зависании

Документация находится здесь: http://docs.jquery.com/Events/hover

$("#home").hover(function(){
    $("#homeText").fadeIn("slow");
},
function(){
    $("#homeText").fadeOut();
});

Answer 2

Как насчет 3 строк?

<script>

    $(function () {

        $('#home').hover(function() {
           $('#homeText').fadeToggle("slow");
        });

    });


    </script>

Достаточно элегантно?

Answer 3

$(function () {
    $('#home').hover(function() {
       $('#homeText').fadeIn("slow");
    });
    $('#home').mouseout(function() {
       $('#homeText').fadeOut("slow");
    });
});

Answer 4

Джон, Отличный совет! Я использовал в качестве отправной точки, хотя для более полного решения. Выполнение этого с помощью простого наведения все равно оставило бы мне вызов наведения для одного элемента меню ... Много избыточного кода Итак, используя то, что вы предложили, я придумал это:

$('.topMenu').hover(function()
        {
        $('#_'+this.id).fadeIn("slow");
        },
        function ()
            {
        $('#_'+this.id).fadeOut();      
            });
});

Всем пунктам меню присвоен класс topMenu и идентификатор. Соответствующий div для отображения - это тот же идентификатор, что и у пункта меню, только с префиксом _ Пример: ....

Материал о нас!

...

Спасибо!