当一个点击下拉菜单出现时,我想模糊舞台上的一切,但它只是模糊了身体!我有一个白色的句子,当它模糊时,我仍然看到句子的颜色是白色的。这意味着模糊在句子下面!我怎么能让模糊在所有东西的顶部,但在下拉菜单下面?
请帮我一下。由于HTML<div class="click-nav">
<ul class="no-js">
<li>
<a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
<ul>
<li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
<li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
<li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
<li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
<li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
</ul>
</li>
</ul>
</div>
<h1> This is a sentence in white</h1>
CSS body {background-color:#94dcff; color:white}
.click-nav {margin:100px auto;width:200px;}
.click-nav ul {position:relative;font-weight:900;}
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
.click-nav ul li ul {position:absolute;left:0;right:0;}
.click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;}
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;}
.click-nav img {position:absolute;top:9px;left:12px;}
.click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;}
/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}
.overlay {
position:absolute;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.3);
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
JS
$(function () {
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
$('.clicker').click(
function()
{
$('body').toggleClass('overlay');
}
);
});
因为(h1)元素是body的子元素,所以它总是放在body的前面。为了快速解决这个特殊的例子,你可以在overlay css类中添加一个color属性,但这与实际的overlay是不一样的。
要创建一个动态创建的覆盖,使用您当前的设置,您可以添加一个div到点击的元素与覆盖类。只有覆盖css的position
属性应该改为fixed
$('.clicker').click(
function()
{
var obj = $(this).children('.overlay');
if(obj.length===0)
$('<div/>', { class: 'overlay'}).appendTo($(this));
else
obj.remove();
}
);
JsBin示例(与您自己的设置唯一不同的是position: fixed和上面显示的click功能)
注意,有更好的通用解决方案可用于此,但这是使用给定场景的特定设置的快速修复。