Reputation: 800
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
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;
}
Upvotes: 0
Views: 1138
Reputation: 135
<!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>
Upvotes: 1