Наведение курсора на div, только если находится другой div

Question

Я новичок в HTML и CSS. В данный момент я пытаюсь выучить их. То, что я хочу сделать, это скрыть div и показывать его, только если вы наводите курсор на другой div. Я почти сделал это, но я не знаю, как именно заблокировать div и сделать видимой только часть зависания div. (Пробовал с дисплеем: блок; и видимость: скрыто; но, похоже, ничего не работает). Если бы кто-то мог мне помочь, я был бы очень благодарен. Заранее спасибо.

PS: Идея состоит в том, чтобы при наведении указателя мыши на "Меню" автоматически навести div с именем "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><a href="#contacts">Login</a></li>
   <li><a href="#contacts">Contact</a></li>
   <li><a href="#projects">Featured Projects</a></li>
   <li><a href="#aboue">About Me</a></li>
   <li><a class="active"  href="#home">Home</a></li>
  </div>
  <div id="OnThisPage">Test</div>

Answer 1

Здесь вы идете с JQuery, я добавил комментарии для вас, чтобы вы поняли, что вы делаете.

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
  })
})

Не забудьте загрузить jQuery так:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

И очень небольшое изменение в вашем CSS-коде - это не:hover, а.Hover сейчас

#OnThisPage.hover{
    position:absolute;
    font-size:20vw;
    top:10vw;
    left:10vw;
    width:10vw;
    height:10vw;
    background:red;
}

Идея состоит в том, что мы переключаем класс для элемента, когда другой элемент наведен, и применяем стили не для:hover, а для этого нового класса.