CSS显示div在:hover或:active的另一个div(不在)

Question

我有一个导航栏在我的页面的顶部，在一个特定的活动，我想在页面的另一部分弹出一个特定的div，这是可能的还是我想要弹出的div必须在导航栏div内?

第一个导航部分是横跨页面顶部的导航栏。有4个按钮，中间有一个标志。第二个部分，在包装器div中，使用网格系统显示三列，第一列是SubNavBar，第二列是Info然后第三列是Links。当点击顶部导航栏的第一个选项时，我想在第一列中显示第二个导航栏。

<nav class="container">
<div class="1">
<a href="#" class="navLinks1">Nav1</a>
</div>
<div class="2">
<a href="#" class="navLinks2">Nav2</a>
</div>
<div class="logo"> Garrett Sauls
</div>
<div class="3">
<a href="#" class="navLinks3">Nav3</a>
</div>
<div class="4">
<a href="#" class="navLinks4">Nav4</a>
</div>
</nav>
<div class="wrapper">
<div class="one">SubNavBar
<nav class = "container2">
<div class="partOne">
<a href="#" class="navLinks2">Nav1.1</a>
</div>
<div class="partOne">
<a href="#" class="navLinks2">Nav1.2</a>
</div>
<div class="partOne">
<a href="#" class="navLinks2">Nav1.3</a>
</div>
<div class="partOne">
<a href="#" class="navLinks2">Nav1.4</a>
</div>
</nav>
</div>
<div class="two">Info

</div>
<div class="three">Links

</div>
</div>

Answer 1

你可以这样做，但这取决于你的HTML的结构。

如果你想应用悬停效果的元素在你的div(邻域)旁边，你可以使用+邻域选择器。

如果需要交互的两个元素之间有元素，则使用~通用兄弟选择器:

.first-element:hover + .adjacent-element {
background: #9dff73;
}

.second-element:hover ~ .distant-element {
background: #9dff73;
}

<div class="first-element">Hover over me</div>
<div class="adjacent-element">Watch me light up!</div>
<br />
<div class="second-element">Hover over me</div>
<div>I'm a div</div>
<span>I'm a span</span>
<section>I'm a section</section>
<div class="distant-element">Watch me light up!</div>