-1

OK so I search and tried few examples but none of them worked. I am using Jquery toggle() to show a DIV on click. It works fine, except I want to show it on hover and keep it open if mouse pointer is inside the Div.

Here is my Code:

Jquery:

$(function() {
    $('#HCLink').click(function() {
        $('.HCContent').toggle('slow');
        return false;
    });
});

HTML:

<li><a href="#" id="HCLink">HEATING & COOLING | </a> </li>
<div class="HCContent" style="display:none;">
    <p>Div Content...</p>
</div>

Tried to change .click to .hover but didn't work.

Kirby
  • 15,127
  • 10
  • 89
  • 104
SG_Rowin
  • 622
  • 3
  • 19

4 Answers4

2

Set the mousenter/mouseleave on container LI element, e.g using hover() in/out handler:

$("li").hover(function () {
     $(".HCContent").stop().toggle("slow");
});

-jsFiddle-

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
1

you can try this;

http://jsfiddle.net/redeown5/2/

you can use mouseleave event for parent element.

Teoman shipahi
  • 47,454
  • 15
  • 134
  • 158
  • This works for Hover, but it hides when the mouse is out of the Div. Need to keep it open whenever the mouse is over the Div. – SG_Rowin May 12 '15 at 19:40
0

Use hide/show instead like this:

$(function() {
    $('#HCLink').on('mouseover', function() {
        $('.HCContent').show('slow');
        return false;
    });
    $('#HCLink').on('mouseout', function() {
        $('.HCContent').hide('slow');
        return false;
    });

});

Fiddle:

http://jsfiddle.net/brettwgreen/2b7xL51m/

Brett Green
  • 3,535
  • 1
  • 22
  • 29
0

Take a look.

$("#HCLink").on("mouseenter",function(){
    $(".HCContent").show("slow");
});

http://jsfiddle.net/tk5rr4bb/1/

NOTE use mouseenter not mouseover

The reason why: https://stackoverflow.com/a/7286680/2956107

Community
  • 1
  • 1
Frogmouth
  • 1,808
  • 1
  • 14
  • 22