如何根据父菜单项更改页面CSS？

Question

我正在构建一个相当简单的站点，我需要根据用户所在的部分修改背景图像。主菜单只有两个级别。我不确定我应该连接到哪里，以便能够获得当前部分(即当前页面的根菜单项，参见下面的示例)，这样我就可以调整页面上的类。我认为这篇文章是一种可能的解决方案，但我只想修改CSS类，对于这样一个简单的任务，这似乎是非常多的代码。

Main Manu:
-- Section 1
   --- Page A
   --- Page B
   --- Page C
-- Section 2
   --- Page D
   --- Page E <- Active page, CSS class "section_2"
   --- Page F

Answer 1

我使用上下文模块解决了这个问题。这使得我可以根据所选的顶级菜单项向主体添加自定义类。就像一种魅力。

Answer 2

如果只是需要额外的类，则可以使用菜单CSS名称或菜单属性模块向菜单项添加额外的和唯一的类。

或者，您可以使用以下纯CSS在悬停时影响另一个DIV的元素。

HTML

<a id="menu-item" href="#">Menu Item</a>

<div id="container">
    <h1>Change This Background</h1>
</div>

CSS

#container {
    background:blue;
}

#menu-item:hover + #container {
    background:red;
}

在这里见费德尔..。在Hover上影响另一个分区