Непрозрачный дочерний элемент полупрозрачного родительского элемента?

Question

У меня есть верхняя навигационная система, которая полупрозрачна, когда она не витала.

nav.top-bar { 
    background: none; 
    opacity: 0.6; 
    transition: opacity 0.4s; 
} 

nav.top-bar:hover{ 
    opacity: 1.0; 
} 

Эта навигация содержит поле поиска. Он выполняет поиск в реальном времени с помощью AJAX и отображает результаты поиска под полем поиска.

Однако он также является дочерним элементом верхней навигации, который становится полупрозрачным, когда он не витает. Поэтому результаты поиска также полупрозрачны.

Как я могу предотвратить превращение его полупрозрачным?

EDIT: Применение прозрачности к фону и текстовому цвету верхней навигации не будет работать, поскольку оно также содержит изображения.

EDIT2: Вы можете проверить эту проблему на моей домашней странице. Поэтому перейдите к http://midifight.club/blog, положите что-то вроде «ali» в поиске. Результаты будут опубликованы. Теперь перетащите мышью в другое место и перетащите ее снова в результаты поиска. Ничего не случится.

Answer 1

Простым решением, которое приходит на ум, является добавление класса к навигации, которое предотвратит его прозрачность при поиске чего-либо.

CSS

.top-bar.focused { opacity: 1 !important; } 

JS

document.getElementById('searchBox').oninput = function(){ 
    if(this.value){ 
     document.getElementById('top-bar').classList.add('focused'); 
    }else{ 
     document.getElementById('top-bar').classList.remove('focused'); 
    } 
} 

Очевидно, что это не будет работать сразу, я просто дать вам идею.

EDIT

3d вид Firefox»может быть очень полезным в разы, как этот

Как вы можете видеть результаты поиска отображаются в верхней части другого контента, а это означает, что ошибки полностью вызваны непрозрачностью, а не z-индексами. Вы также можете перейти к этому выводу, наведя курсор на меню и увидев, что он появляется сверху, когда он не исчез, если это проблема с z-индексом, тогда он не появится сверху, даже если он был непрозрачным.