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

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，在搜索中输入“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');
    }
}

显然这不会马上奏效，我只是给你一个想法。

编辑

Firefox 的 3d 视图在这种情况下非常有用

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