On mouseleave of one div AND mouseenter of other div when both condition true

Question

There is 4 divs like following

<style>
    .displayNoneIcon {
        display: none;
    }
</style>

<div id="div1" style="float: left">
    <div id="div11">hello</div>
    <div id="div12">hi</div>
</div>
<div id="div2" style="float: right">
    <div id="div21" class="displayNoneIcon"><a href="#">bye</a></div>
    <div id="div22" class="displayNoneIcon"><a href="#">see ya</a></div>
</div>

I want to show div 21 when i hover on div11, dev22 on hover of div12, just like menu it should stay and clickable. If i move out from div11 then div21 must hide, except user enters into div21. Currently if i move out my pointer out of div11 towards div21 its hiding. i want it to be stayed. Both must be in separate div like above.

I tried with mouseenter and mouseleave but its not fulfilling my requirement. Please help me with this.

$( "body" ).on( "mouseenter", "#div11", function(event) {
    $( "#div21" ).removeClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseleave", "#div11", function(event) {
    $( "#div21" ).addClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseenter", "#div12", function(event) {
    $( "#div22" ).removeClass( "displayNoneIcon" );
});
$( "body" ).on( "mouseleave", "#div12", function(event) {
    $( "#div22" ).addClass( "displayNoneIcon" );
});

Thanks in advance. jsfiddle link

Answer 1

The best way to implement this for learning reasons is to use an observer pattern in javascript.

Observer pattern wiki

Here is an example tutorial doing this in javascript

From my point of view you will want to fire a function on mouse-over/mouse-out that broadcasts the status, then functions subscribed to that broadcast can update the show/hide status of the divs. This is also more recyclable than what you have in your question above.

Goodluck!