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

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 View 在这种情况下非常有用

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