Question

我有两个div。当我在一个链接上翻转时，我想隐藏一个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中的一个元素（display标签）悬停时我是否可以更改包含div的<a>属性？也就是说，将鼠标悬停在某个链接上应该会将其包含的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

仅显示/隐藏不同的Div

2 个答案: