Mouseout on specified divs and keep original div open

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

Answer 2

Why don't you simply keep your simple hover logic as it is (hide on mouse out) but then simply re-show it when the mouse is over the X or Y div.

$('#openDiv').mouseout(function() {
    $(this).hide();
});

$('div.x').mousein(function() {
    $('#openDiv').show();
});

If you make your $('div.x') selector have an ID or at least a context that isn't the entire DOM, I bet the "flicker" from hiding then showing again isn't even noticeable.