-2

我有一个相当侵入性的下拉导航菜单。项目的数量意味着它显示在其他主要内容之上。这没什么大不了的，因为它是一个非常简单的页面。

我想做的是使背景 div 透明/不透明或在导航栏悬停时隐藏。将鼠标悬停在导航上会使下拉菜单出现，如果同时背景 div 褪色，它可能会变得相当优雅。

当 div 是另一个孩子的孩子时，我可以更改它，但在这种情况下它不是。（澄清一下，它当然是一个孩子，但我只希望它在导航悬停时成为目标）

我有一个类似于这样的布局：

<wrapper>
    <header></header>
    <content>
        <nav></nav>
            <other container> 
                <divToBeAltered></divToBeAltered>
                <divToBeAltered></divToBeAltered>
            </other>
    </content>
</wrapper>

如果可能的话，我想避免使用 jQuery。

感谢您的任何帮助。

4

2 回答 2

2

尝试使用 css 兄弟选择器。http://css-tricks.com/child-and-sibling-selectors/

在这种情况下，做类似的事情

nav:hover + othercontainer divtobealtered{
  opacity:0.5;
}
于 2013-07-29T21:02:11.537 回答
2

看来我参加聚会迟到了。我在 jsfiddle 中构建了一个与 @cowboybebop 类似的解决方案来测试它。

http://jsfiddle.net/x2dY2/

<nav>
  <ul>
    <li>ONE</li>
    <li>TWO</li>
  </ul>
</nav>
<section>
  <div>Test</div>
</section>

css

nav:hover+section div {color: red}
于 2013-07-29T21:20:59.520 回答