Question

当出现点击下拉菜单时，我想在舞台上模糊一切，但它只会模糊身体！我有一个白色的句子，当它模糊时，我仍然看到句子的颜色为白色。这意味着模糊在句子下面！如何在所有内容之上模糊，但在下拉菜单下方？

请帮帮忙。感谢

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');
            }
        );
});

Answer 1

因为（h1）元素是正文的子元素，所以它总是放在正文之前。要快速修复此特定示例，您可以向overlay css类添加颜色属性，但这不会与实际叠加层相同。

要使用当前设置创建动态创建的叠加层，您可以使用叠加层类为已点击的元素添加div。只有overlay css position属性应更改为fixed

  $('.clicker').click(
        function()
        {
           var obj = $(this).children('.overlay');              
           if(obj.length===0)
              $('<div/>', { class: 'overlay'}).appendTo($(this));
           else
             obj.remove();

        }
    );

JsBin example（只有与您自己的设置不同的是位置：固定并且上面显示的点击功能）

注意，有更好的通用解决方案可用于此，但这是使用给定方案的特定设置的快速修复。

当点击下拉菜单出现时，模糊每一件事

1 个答案: