Hovering a div only if another div is hovered - html

Question

I am new to HTML and CSS. At the moment, I am trying to learn them. What I want to do is hiding a div and showing him only if you hover on another div. I almost did it, but I do not know how exactly to block the div and let only the hovered part of the div visible. (Tried with display:block; and visibility:hidden; but nothing seems to work). If someone could help me I would be really thankful. Thanks in advance.
PS: The idea is when you hover on "Menu" to hover automatically a div called "OnThisPage".
body{
margin:0;
padding:0;
background-color:#232323;
}
#NavigationWrap{
position:relative;
width:100vw;
height:5vw;
background-color:#FFFFFF;
}
#Logo{
position:relative;
margin-left:1vw;
top:50%;
width:29vw;
height:4vw;
transform:translateY(-50%);
float:left;
}
#NavigationMenu{
position:relative;
top:50%;
width:70vw;
height:2vw;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li{
position:relative;
top:50%;
list-style-type: none;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li:after{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
content:"|";
}
#NavigationMenu li:first-child:after{
content:" ";
}
#NavigationMenu li a{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
color: #cc6666;
text-decoration: none;
}
#NavigationMenu li a.active{
color:#00cccc;
}
#NavigationMenu li a.active:hover + #OnThisPage:hover{
color:#000000;
}
#NavigationMenu li a:hover{
position:relative;
color:#00cccc;
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
}
#OnThisPage{
position:relative;
}
#OnThisPage:hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
<div id="NavigationWrap">
<div id="Logo">Logo</div>
<div id="NavigationMenu">
<li>Login</li>
<li>Contact</li>
<li>Featured Projects</li>
<li>About Me</li>
<li><a class="active" href="#home">Home</a></li>
</div>
<div id="OnThisPage">Test</div>

Answer 1

Here you go with jQuery, I added comments for you so you understand what you do.
jQuery("document").ready(function() { // we wait for document to get ready state
jQuery("#NavigationMenu li a").hover(function() { // we get hover state event on Menu
jQuery("#OnThisPage").toggleClass("hover") // and we just toggle class "hover" for another div
})
})
Don't forget to load jQuery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And very small change to your CSS code - it's not :hover, but .hover now
#OnThisPage.hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
The idea is that we toggle class for the element when the other element is hovered and apply styles not for :hover, but for this new class.