Сделайте div непрозрачным, зависающим над другим, который не является ребенком этого Div

У меня довольно навязчивое раскрывающееся меню навигации. Количество элементов означает, что оно отображается поверх другого основного содержимого. Это не такая уж большая проблема, как довольно простая страница.

То, что я хотел бы сделать, - сделать фоновые divs прозрачными/непрозрачными или скрыть, когда навигационная панель зависнет. При наведении курсора на навигационное устройство выпадающее изображение появляется, и если в то же время фоновые фоны исчезают, он может оказаться довольно элегантным.

Я могу изменить div, когда он ребенок другого, но в этом случае это не так. (Чтобы уточнить, это, конечно, ребенок, но я хочу, чтобы он был нацелен, когда навигатор зависает)

У меня есть макет, подобный этому:

<wrapper> <content> <other container=""> </other> </content>
</wrapper>

Я хотел бы избежать jQuery, если это возможно.

Спасибо за любую помощь.

2 ответа

Попробуйте использовать селектор sssling css. http://css-tricks.com/child-and-sibling-selectors/

В этом случае сделайте что-нибудь вроде

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


Кажется, я опаздываю на вечеринку. Я разработал аналогичное решение для @cowboybebop one в jsfiddle, чтобы проверить его.

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}

licensed under cc by-sa 3.0 with attribution.