Сделайте 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.