Mouseout from div to neighboring div, keep main div open, mousout outside those divs, main div closes [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Mouseout on specified divs and keep original div open

I asked a similar question and it got buried without any answer that solves this, so please don't flame me as I've waited and no answer works.

Here is the original question: Mouseout on specified divs and keep original div open

Here is the fiddle all set up: http://jsfiddle.net/bUzPG/10/

It seems like everything should work with the fiddle, but the code doesn't do what it should. Any 开发者_Go百科working answer will be marked as solved, this is driving me crazy!

---

If I understand you correctly:

$("#openDiv").mouseout(function (e) {
var used_classes = ['x', 'z'];
var $c = $(e.relatedTarget).attr('class');

   if ($c=='x' || $c=='z')
 {
     $("#openDiv").show().css('background-color', 'pink');
 }else{
    $("#openDiv").hide();
 }
  });

---

Hope this is what you wanted

http://jsfiddle.net/bUzPG/16/

---

Would it work if you did it this way, by surrounding your 3 divs in a parent div? http://jsfiddle.net/bUzPG/17/

---

The easiest way is to wrap the div elements in a parent div and assign the hover() events to that container:

html:

<div>
    <div class="x">x</div>
    <div id="openDiv" class="y">me</div>
    <div class="z">z</div>
</div>

jQuery:

$('.container').hover(
    function(){
        $('#openDiv').addClass('highlight');
    },
    function(){
        $('#openDiv').removeClass('highlight');
    });

JS Fiddle demo.

Bearing in mind that the parent div (or other containing element) needs to fit tightly to the bounds of the div elements, otherwise the mouseleave event won't trigger as you'd expect), which is why the div (but not the div > divs) is floated. Other options include display: inline; or display: inline-block;.