半透明父元素的非透明子元素？

Question

我有一个顶级导航，当它没有徘徊时会变得半透明。

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

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

此导航包含搜索字段。它通过AJAX实时搜索并在搜索字段下方显示搜索结果。

然而，它也是顶级导航的孩子，在不悬停时会变得半透明。因此搜索结果也是半透明的。

如何防止它变得半透明？

编辑：将透明度应用于顶部导航的背景和文字颜色不会起作用，因为它还包含图像。

EDIT2：您可以在我的主页上查看问题。 因此，请转到http://midifight.club/blog，输入类似＆＃34; ali＆＃34;在搜索中。结果将会出现。现在将鼠标拖到其他位置并再次将其拖动到搜索结果中。什么都不会发生。

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');
    }
}

显然这不会马上起作用，我只是给你一个想法。

修改

火狐＆＃39;在这样的时间里，3d视图真的很有用

正如您所看到的，搜索结果显示在其他内容之上，这意味着错误完全是由不透明度而非z索引引起的。您也可以通过将鼠标悬停在菜单上并看到它在未褪色时显示在顶部来获得此结论，如果它是z-index问题，那么即使它不是透明的，它也不会出现在顶部。 / p>