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

Question

我是 HTML 和 CSS 的新手。目前，我正在努力学习它们。我想要做的是隐藏一个 div 并仅当您将鼠标悬停在另一个 div 上时才显示他。我几乎做到了，但我不知道如何准确地阻止 div 并只让 div 的悬停部分可见。 (尝试显示: block ；和可见性:隐藏；但似乎没有任何效果)。如果有人可以帮助我，我将非常感激。提前致谢。

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，而是 .hover

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

我们的想法是，当另一个元素悬停时，我们切换该元素的类，而不是为 :hover 应用样式，而是为这个新类应用样式。