2013-09-22 64 views
0

我有類似下面的一些代碼:力div嵌套顯示在上面

HTML

<div id="darkOverlay"></div> 
<div id="content"> 
    <div id="whiteText">I need to be clear bright white!</div> 
</div> 

當我點擊一個按鈕,我給的div以下屬性:

$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)'); 
$('#darkOverlay').css('z-index','100'); 
$('#whiteText').css('display','block'); 
$('#whiteText').css('z-index','500'); 

所以基本上我會讓darkOverlay變成深色半透明並將其帶到前面。然後我還會顯示白色文字並將其帶到(更多)前端。

但是,看起來darkOverlay仍然在我的白色文本之上投射其半透明。這導致白色文本不會顯示爲白色,因爲我需要它。我該怎麼做才能確保我的白色文字脫穎而出?

CSS [在頁面加載]

#darkOverlay { 
    position: absolute; 
    top: 0px; 
    height:100%; 
    width:100%; 
    z-index:-100; 
} 

#whiteText { 
    display: none; 
    position: absolute; 
} 
+1

你能提供所有這三種的div的實際CSS定義?有沒有? – Tomalla

+0

@Tomalla,我在上面添加了它。雖然沒有太多。 – adrianmc

+1

似乎正在工作,你可能有其他的CSS導致這個問題http://codepen.io/anon/pen/kLzdh –

回答

0

如果它是白色文字的爭議,這是因爲從來都沒有設置顏色爲白色。

$('#whiteText').css('color','white'); 

或者完整的例子:

<!DOCTYPE HTML> 
<html> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script> 
<style> 
#darkOverlay { 
    position: absolute; 
    top: 0px; 
    height:100%; 
    width:100%; 
    z-index:-100; 
} 

#whiteText { 
    display: none; 
    position: absolute; 
} 
</style> 
<body> 

<div id="darkOverlay"></div> 
<div id="content"> 
    <div id="whiteText">I need to be clear bright white!</div> 
</div> 

<div style="position: relative"> 
    <button id="clickme">clickme</button> 
</div> 
</body> 
<script> 
$("#clickme").click(function(e) { 
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)'); 
$('#darkOverlay').css('z-index','100'); 
$('#whiteText').css('color','white'); 
$('#whiteText').css('display','block'); 
$('#whiteText').css('z-index','500'); 
}); 
</script> 
</html>