仅显示/隐藏不同的 div

Question

我有两个 div。当我在一个链接上滚动时，我想隐藏一个 div 并显示另一个，这样看起来就好像背景颜色已经改变了。这是一些示例 HTML：

<div id="main-nav">
 <ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
 </ul>
</div>

<div id="sub-nav">
 <ul>
  <li>SubItem 1</li>
  <li>SubItem 2</li>
  <li>SubItem 3</li>
 </ul>
</div>

sub-nav div 与 main-nav div 完全相同，只是背景颜色不同。

#main-nav {
 width: 500px;
 height: 250px;
 background-color: black;
 display: block;
}

#sub-nav {
 width: 500px;
 height: 250px;
 background-color: white;
 display: none;
}

我只想在#main-div 中的项目悬停时显示#sub-nav div。所以效果将是背景颜色在悬停时似乎从黑色变为白色。

我可以只使用 CSS 吗？

基本上，我想知道是否可以在包含 div 的元素（<a> 标签）悬停时更改包含 div 的 display 属性？也就是说，悬停在链接上应该导致其包含的 div #main-nav 更改为 display: none 和 #sub-nav div 变为 display:block

Answer 1

不，您不能仅使用 CSS 来做到这一点。您需要 subnav 是您悬停的元素的子元素或与其直接相邻的元素。

你可以使用css选择器

#main-nav li:hover .sub-nav{}

或

#main-nav li:hover + .sub-nav{}

或者你可以使用 javascript

Answer 2

为什么不直接改变背景颜色呢？像这样：

<div id="main-nav">
    <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
    </ul>
</div>

#main-nav:hover { background-color: black; }

编辑你可以完全按照你的要求做，但你需要一个包装器：

<div class="navigation-wrapper">
    <div class="main">
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </div>
    <div class="sub">
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </div>
</div>

在你的 CSS 中：

.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }

Fiddle demo