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

Question

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

PS：这个想法是当您将鼠标悬停在 "Menu" 上时自动悬停一个名为 "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;
}

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

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

Hovering a div only if another div is hovered

html

css

hover

onhover