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

I don't understand your problem. Your code ([JS Fiddle](http://jsfiddle.net/y34Xu/)) seems to do what you describe. Could you explain better? — blex, Jul 21 '14 at 14:31
.show() and .hide() do the same as adding and removing a class with display:none; — Marcel, Jul 21 '14 at 14:33
Is [**this JS Fiddle**](http://jsfiddle.net/y34Xu/1/) doing what you want? (There is a container. If you leave this container, it hides everything. If not, it keeps the last hovered element's related div shown) — blex, Jul 21 '14 at 14:44
hi blex, thanks for the reply. in the JS fiddle output you cant click the links, when i move out from div11 and 12 the div 21/22 get hidden, i want it to be displayed and clickable.. Like menu submenu.... — KpBhat, Jul 21 '14 at 16:12
Hi @blex, Thanks again, but As per my requirement, I can have external container. without External container how can i make it work..? — KpBhat, Jul 21 '14 at 16:36

score 0 · Answer 1 · answered Jul 21 '14 at 14:36

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!

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

1 Answers1