CODEWITHSUNDEEP
jquery
Chris
Chris

Reputation: 1883

Opening a div on hover, then keeping div open while hovering over div

Sorry about the title to this question, it's not very clear but wasn't sure how to describe it!

Basically the problem I'm having is this. I am working on an enrolment form for training courses. There are a number of help images which open up a div on hover with additional information. What I need is for the help box to stay open if you hover over the div itself. At the moment the div closes when you move away from the help image, which makes it impossible to click on any links within the box. I want the div to stay open when hovering over either the help image or the div, but close when you move away onto another part of the page.

The HTML is here:

<a href="#" id="pohelplink" class="helplinks">
 <img src="images/help.png" class="helpimage" id="pohelpimage" />
</a>
<div class="helpbox" id="pohelp">
 <h4>Purchase Order</h4>
 <p>If your company requires purchase orders to be raised, we'll need to know the PO Number so we can include it on our invoice. Please type the number into this box.</p>
 <p>If your organisation doesn't use purchase orders then you can simply leave this area blank.</p>
</div>

And the Jquery:

$("#pohelplink").hover(function(){
 $("#pohelplink").css({"z-index":"1110"});
 $("#pohelp").fadeIn();
 },
function(){
 $("#pohelp").fadeOut();
 $("#pohelplink").css({"z-index":"1095"});
});

Any help much appreciated.

P.S. The change to the z-index is to keep the help image visible when the help div pops up, as the two overlap. I don't think it will be relevant to this particular problem, but wanted to include it for the sake of completeness.

Thanks!

Upvotes: 1

Views: 8788

Answers (3)

Anoop
Anoop

Reputation: 23208

Following code may solve your problem: jsfiddle

    $("#pohelplink, #pohelp").mouseenter(function () {// show pohelp 
        $("#pohelplink").css({
            "z-index": "1110"
        });
        $("#pohelp").fadeIn();
    });
 $("#pohelp").mouseleave(function(){ // show pohelp tile mouseleave from pohelp
       $("#pohelp").fadeOut();
      $("#pohelplink").css({"z-index":"1095"});
});​

Upvotes: 4

Sibu
Sibu

Reputation: 4617

Like this

  $("#pohelplink,#pohelp").hover(function(){
     $("#pohelplink").css({"z-index":"1110"});
     $("#pohelp").fadeIn();
     },
    function(){
     $("#pohelp").fadeOut();
     $("#pohelplink").css({"z-index":"1095"});
    });​

check this demo

Upvotes: 0

Zahid Riaz
Zahid Riaz

Reputation: 2889

See jQuery HoverIntent Pluggin for this

Upvotes: 1

Related Questions