Hover content of a hover()

问题:

I have a simple button which displays a list on hover.

Working example

I just need to hover the list content, like a dropdown menu. How do I add script to perform that function?

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);   
        });
    });

回答1:

Rather than using .hover(), use .mouseenter() on the button to show the menu, and .mouseleave() on the menu to hide it again.

$(document).ready(function(){

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

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

});

Edit of your jsbin here: http://jsbin.com/iroxop/1/edit

回答2:

I just modified Scottie's code for your requirement

$(document).ready(function(){

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

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

    });

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

回答3:

It sounds like your issue is that the menu shows when you hover over the button, but disappears when you hover over the menu. Try wrapping the button and ul elements in another div, the attach the hover functions to that wrapper. Working example in this fiddle.

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

回答4:

Do You want to do like this?

Fiddle

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

just used slideUp() and slideDown()