Question

I’m trying to do this in plain english: I have an open div from a mouseover event, when I take the mouse out of the div it closes on mouse out, perfect. What I need is that when I mouseout, if I mouseout to a div with class x or class y, the openDiv will not close, any mouseout on any other div besides class x or class y, will cause the openDiv to close.

Here is what I have so far, but it doesn’t work:

$("#openDiv").mouseout(function () {
    var $c = $(e.target); //div where mouse is
    if ($c.is('div.x') || ('div.y')) //if div where mouse is has class x or y
    {
        $("#openDiv").show(); //show or keep open from the mouseover event
    } else {
        $("#openDiv").hide(); //hide openDiv if mouse is anywhere outside openDiv or div with class x or y
    }
});

UPDATE:
I need more help to select a working answer!
jsfiddle.net/bUzPG/8
Hovering over class x,y,or z keeps it open, hovering over x or z turns the openDiv pink, but hovering outside the openDiv also turns it pink, when it should turn grey and hide it. Any idea how to make it turn grey and hide?

Answer 1

$("#openDiv").mouseout(function (e) { //you forgot to add the event `e` element
    var $c = $(e.target);
    if ($c.is('div.x') || $c.is('div.y')) //you forgot $c.is on the second part
    {
        $("#openDiv").show(); 
    } else {
        $("#openDiv").hide(); 
    }
});