Hover content of a hover()

Question

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

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

It will be easy to fulfil your need if we get some code. – Dhaval Marthak Apr 17 '13 at 12:11 — Dhaval Marthak, Apr 17 '13 at 12:11
@The-Val i have added my code solve this if you can – Jhonny Apr 17 '13 at 12:14 — Jhonny, Apr 17 '13 at 12:14

score 1 · Answer 1 · answered Apr 17 '13 at 12:19

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

answered Apr 17 '13 at 12:19

Scott

2,753
1
24
31

the problem is i also need slideUp function when i leave the button (somewhere else apart from the list) – Jhonny Apr 17 '13 at 12:21

Dhaval Marthak · Answer 2 · 2013-04-17T15:36:20.337

0

Do You want to do like this?

Fiddle

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

just used slideUp() and slideDown()

edited Apr 17 '13 at 15:36

answered Apr 17 '13 at 12:30

Dhaval Marthak

17,246
6
46
68

Yeah almost but when i leave the button (Instead of coming into the ul i move my cursor to some where else it has to be hide) – Jhonny Apr 17 '13 at 12:40
I have updated Fiddle @Jhonny, have a look at it http://jsfiddle.net/EpV87/25/, right now i have used `show()` and `hide()` you can replace it according to your requirement – Dhaval Marthak Apr 17 '13 at 15:22

score 0 · Answer 3 · answered Apr 17 '13 at 12:33

0

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/

answered Apr 17 '13 at 12:33

Dolo

966
14
28

Dolours same error friend the problem is i also need slideUp function when i leave the button (if i move my cursor somewhere else apart from the list) – Jhonny Apr 17 '13 at 12:42
SlideUp function working when you leave the mouse whats problem in that check the fiddle – Dolo Apr 18 '13 at 04:34

score 0 · Answer 4 · answered Apr 17 '13 at 13:43

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

Hover content of a hover()

4 Answers4

Linked