CSS 在另一个 div 的 :hover 或 :active 上显示 div（不在其中）

Question

我的页面顶部有一个导航栏，在某个导航栏的 :active 上，我希望在页面的另一部分弹出某个 div，这可能还是我想要的 div弹出窗口必须在导航栏 div 内？

第一个导航部分是一个横跨页面顶部的导航栏。中间有4个按钮和一个logo。第二部分，即在包装器 div 内，使用网格系统显示三列，第一列是“SubNavBar”，第二列是“信息”，第三列是“链接”。当点击顶部导航栏中的第一个选项时，我希望在第一列中出现第二个导航栏。

<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>