Hover on one div to display another div

Question

Cracking for a whole day now and still couldnt find a simple solution to this problem.

I have a class

  .displaynone{
      display:none;
    }

I am trying to

Hover on #hoversubheader1 and display #subheader1 by removing .displaynone on #subheader1.
Do not allow #subheader1 to disappear when I move my mouse from #hoversubheader1 into #subheader1
Add back that class to #subheader1 when my mouse is in neither #subheader1 nor #hoversubheader1.

Have yet to accomplish step 2 and 3.

I know you will want me to nest the elements, but I have reasons to not do so. In reality the two divs are separated by some 'space', so naturally I might need a setTimeout or other timing related functions for this but am also not sure if I am on the right track.

Would make my day if someone could help on this.

Markup

<div class="ui basic vertical segment" id="header">
        <div class="ui container">
            <div class="ui text menu">
                <a class="item">
                    Item
                </a>
            </div>
            <div class="ui text menu displaynone" id="subheader">
                    <a class="right item" id="hoversubheader1">
                        subheadertitle1
                    </a>
                    <a class="item" id="hoversubheader2">
                        subheadertitle2
                    </a>
            </div><!--end of subheadermenu-->
            <div class="ui text menu displaynone" id="subheader1">
                    <a class="right item">
                        detail
                    </a>
                    <a class="item">
                        detail
                    </a>
            </div><!--end of subheadermenu-->
            <div class="ui text menu displaynone" id="subheader2">
                    <a class="right item">
                        detail
                    </a>
                    <a class="item">
                        detail
                    </a>
            </div><!--end of subheadermenu-->
        </div><!--end of container-->
    </div><!--end of segment-->

JS

    (function($) {
    "use strict"; // Start of use strict
    //header hover brings out subheader bar
    $("#header").hover(
      function () {
        $("#subheader").removeClass("displaynone");
      },
      function () {
        $("#subheader").addClass("displaynone");
      }
    );
    //hovering on each subheadertitle should display each subheader1, subheader2 etc
    $('#hoversubheader1,#subheader1').mouseenter(function(){

        $('#subheader1').removeClass("displaynone");
    }).mouseleave(function(){

        $("#subheader1").addClass("displaynone");

    });

    $('#hoversubheader2,#subheader2').mouseenter(function(){

        $('#subheader2').removeClass("displaynone");
    }).mouseleave(function(){

        $("#subheader2").addClass("displaynone");

    });
    }(jQuery)); // End of use strict

CSS

#header{
    background-color: white;
    opacity: 0.97;
    position: fixed;
    width: 100%;
    z-index: 99;
    padding:0;
    padding-bottom:0;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

#header > .ui.container > .ui.text.menu{
    margin-bottom:0;
}


#subheader,
#subheader1,
#subheader2{
  padding:0;
  margin:0;
}

#subheader1,
#subheader2{
  height:200px;
}

#subheader > .ui.text.menu,
#subheader1 > .ui.text.menu,
#subheader2 > .ui.text.menu{
  margin:0;
}
#subheader.displaynone,
#subheader1.displaynone,
#subheader2.displaynone{
  display:none;
}

Answer 1

 <!DOCTYPE html> <html> <head> <style> .general { height: 100px; width: 100px; border: solid 1px black; } .divClass { display: inline; } .divClassB { display: none; } </style> <script src="script.js"></script> <script> var flag = false; function MouseOver(obj) { if (obj.id == "DivA" || obj.id == "DivB") { flag = true; document.getElementById('DivB').style.display = 'inline'; } showhide(flag); } function MouseOut(obj) { if (obj.id == "DivA" || obj.id == "DivB") flag = false; setTimeout(function() { showhide(flag); }, 3000); } function showhide(flag) { if (flag) { document.getElementById('DivB').style.display = 'inline'; } else document.getElementById('DivB').style.display = 'none' } </script> </head> <body> <h1>Hello Plunker!</h1> <div class="general divClass" id="DivA" onmouseout="MouseOut(this)" onmouseover="MouseOver(this)"> Div A </div> <div> This is for space </div> <div id="DivB" class="general divClassB" onmouseout="MouseOut(this)" onmouseover="MouseOver(this)"> Div B </div> </body> </html>

Hover on one div to display another div

Question

1 answers

solution1
1 ACCPTED 2016-09-21 12:00:13

Hover on one div to display another div

Question

1 answers

solution1 1 ACCPTED 2016-09-21 12:00:13

solution1
1 ACCPTED 2016-09-21 12:00:13