CODEWITHSUNDEEP
jquery
Cadilac
Cadilac

Reputation: 1100

A little complex compose of mouseover and mouseout

How can i change this function:

 $('#myContent').live('mouseover mouseout', function(event){
    if ( event.type == "mouseover" ) {
      $('#editContent').show();
    } else {
      $('#editContent').hide();
      }
   });

if i want $('#editContent') to be show on mouseover on $('#myContent'), but then it should be hiden only if $('#myContent') has event mouseover and $('#editContent') has mouseover?

Upvotes: 0

Views: 135

Answers (2)

Kristoffer Lundberg
Kristoffer Lundberg

Reputation: 876

One question, do you have to use the event "live"? Since I don't know how your HTML is implemented, I can just assume things.

Live demo

Above is an example how you can achieve this. As I assume you do not append "editContent" and "myContent" dynamically, I use event "hover" instead.

Hope that helps!

Upvotes: 1

Rob W
Rob W

Reputation: 348992

So, when hovering over #myContent, #editContent has to be shown. Then, #editContent has only to be hidden when the mouse is not at #myContent or #editContent. See:

(function(){
    var delay;
    var editContent = $('#editContent');
    $('#myContent').live('mouseover', function(){
        editContent.show();
    }).live('mouseout', function(){
        clearTimeout(delay); //Prevent stacked timeouts
        delay = setTimeout(function(){ //Set timeout
            editContent.hide();
        }, 300); //Activate hider after 300ms
    });
    editContent.live('mouseenter', function(){
       clearTimeout(delay); //Clear hider, to keep the element visible
    });
})();

Upvotes: 1

Related Questions