Question

我有一个非常具有侵入性的下拉导航菜单。项目数意味着它显示在其他主要内容上。这不是一个非常简单的页面。

我想做的是让背景div透明/不透明或在导航栏悬停时隐藏。将鼠标悬停在导航栏上会显示下拉列表，如果同时背景显示淡入淡出，则可能会显得相当优雅。

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

我的布局类似于：

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

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

感谢您的帮助。

Answer 1

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

在这种情况下，请执行类似

的操作

nav:hover + othercontainer divtobealtered{
  opacity:0.5;
}

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

当盘旋在不是该Div的孩子的另一个上时，使div不透明

2 个答案: