Наведите указатель мыши на hover()

Question

У меня есть простая кнопка, которая отображает список при наведении.

Working example

мне просто нужно навести содержимое списка, как выпадающее меню. Как добавить скрипт для выполнения этой функции?

HTML

<button id="test">Hover Me</button> 
<ul class="tester"> 
    <li>Menu 1</li> 
    <li>Menu 2</li> 
    <li>Menu 3</li> 
    <li>Menu 4</li> 
    <li>Menu 5</li> 
    <li>Menu 6</li> 
    <li>Menu 7</li> 
    <li>Menu 8</li> 
</ul> 

Script

$(document).ready(function() { 

    $("#test").hover(
     function() { 
      $('.tester').slideDown(500); 
     }, 
     function() { 
      $('.tester').slideUp(500); 
     }); 
    }); 

Answer 1

Вместо использования .hover(), используйте .mouseenter() на кнопке, чтобы открыть меню, и .mouseleave() в меню, чтобы скрыть его снова.

$(document).ready(function(){ 

    $("#test").mouseenter(function() { 
    $('.tester').show(); 
    }); 

    $('.tester').mouseleave(function() { 
    $(this).hide(); 
    }); 

}); 

Редактировать вашего jsbin здесь: http://jsbin.com/iroxop/1/edit

Answer 2

ли Вы хотите сделать, как это?

Fiddle

http://jsfiddle.net/EpV87/25/

просто использовали slideUp() и slideDown()

Answer 3

Я только изменил код Скотти для вашего требования

$(document).ready(function(){ 

     $("#test").mouseenter(function() { 
    $('.tester').slideDown(500); 
     }); 

     $('.tester').mouseleave(function() { 
     $(this).slideUp(500); 
     }); 

    }); 

http://jsfiddle.net/dolours/mTa6j/

Answer 4

Похоже, ваша проблема заключается в том, что меню отображается при наведении курсора на кнопку, но исчезает, когда вы наводите курсор на меню. Попробуйте обернуть button и ul элементами в другом div, прикрепите функции зависания к этой обертке. Рабочий пример в этом fiddle.

$("#menu").hover(
    function() { 
     $('.tester').slideDown(500); 
    }, 
    function() { 
     $('.tester').slideUp(500); 
    } 
);