我有一個頂部導航，當它沒有被徘徊的時候它變得半透明。半透明父元素的透明子元素？

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

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

此導航包含搜索字段。它通過AJAX進行實時搜索，並在搜索字段下方顯示搜索結果。

然而，它是頂部導航的孩子，當它沒有徘徊時它變得半透明。因此搜索結果也變得半透明。

enter image description here

我怎樣才能防止它成爲半透明？

編輯：將透明度應用於背景和文本顏色的頂部導航將無法正常工作，因爲它也包含圖像。

EDIT2：您可以在我的主頁上查看問題。因此請去http://midifight.club/blog，在搜索中加入「ali」。結果將會出現。現在將鼠標拖動到其他位置，然後再將其拖動到搜索結果中。什麼都不會發生。

來源

2015-03-19 Hedge

你不能，就是這樣，當你設置一個元素不透明度時，它也會影響該元素中的所有元素。解決方法是將背景設置爲RGBA，但這需要實際背景 – adeneo 2015-03-19 12:51:01

1.移除不透明度。 2.像rgba（255,255,255，0.6）一樣添加'background：rgba（）'3.像背景一樣添加'color：rgba（）'。顏色可以繼承，所以只需改變搜索字段即可。雖然背景只是在元素本身 – Persijn 2015-03-19 12:52:30

而不是使整個元素透明，只需做你需要的CSS屬性：'background-color：rgba（255,0,0,0.5）; border：1px solid rgba（0,255,0,0.5）;' – 2015-03-19 12:52:39

想到的最簡單的解決方案是嚮導航中添加一個類，以避免在搜索到某物時透明化。

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視圖可以真正的幫助在幾次都是這樣

enter image description here

正如你可以看到搜索結果出現在其他內容的頂部，這意味着這些錯誤完全是由不透明引起的，而不是z-索引。您也可以通過將鼠標懸停在菜單上並在不褪色的情況下看到它出現在頂部，如果它是z-index問題，那麼即使它不透明也不會出現在頂部時，您可以得出這個結論。

來源

2015-03-19 13:37:12

這非常聰明。由於我自己管理與搜索結果出現和消失有關的所有事情，所以我可以完成這項工作。我不會回答這個問題，因爲我非常想知道爲什麼Z順序會這樣結束。 – Hedge 2015-03-19 13:40:00

@對衝我在「z順序」上添加了一些信息 – 2015-03-19 13:52:25

不透明行爲真的是越野車，還是我使用它錯了？現在，如果我只能吃金槍魚三明治，我會100％確定這是我尋找的答案：D只是開玩笑，謝謝你！ – Hedge 2015-03-19 14:08:56

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

回答

CSS

JS

相關問題