仅当悬停另一个 div 时才悬停一个 div答案

【问题标题】：Hovering a div only if another div is hovered仅当悬停另一个 div 时才悬停一个 div
【发布时间】：2016-01-18 17:23:21
【问题描述】：

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

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>

【问题讨论】：

你对使用 jQuery 还满意吗？
是的。但是，我并不擅长 jQuery。这是我只尝试使用 HTML 和 CSS 的第一个原因。
好的，所以我尽量说清楚
非常感谢，非常感谢。最后但并非最不重要的感谢您的非常详细的解释。我现在要测试它。
您可以使用 codepen codepen.io/anon/pen/ZQaxZj =) 现场查看它

标签： html css hover onhover

【解决方案1】：

在这里，您使用 jQuery，我为您添加了 cmets，以便您了解自己在做什么。

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。

【讨论】：