只有当另一个div悬停时才悬停div

Question

我是HTML和CSS的新手。目前，我正在努力学习它们。我想要做的就是隐藏一个div，只有当你在另一个div上盘旋时才显示他。我几乎做到了，但我不知道如何阻止div，只让div的悬停部分可见。 （尝试显示：阻止;可见性：隐藏;但似乎没有任何效果）。如果有人可以帮助我，我会非常感激。提前谢谢。

PS：这个想法是当你将鼠标悬停在“菜单”上时自动悬停一个名为“OnThisPage”的div。

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

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

我们的想法是，当另一个元素悬停时我们切换元素的类，并且不应该为：hover应用样式，但是对于这个新类。