Question

完全不知道如何制作导航菜单，当它悬停时，整个页面的透明度仅降至50％。任何人都可以告诉我，我为这个案子写的是什么css？

jsfiddle.net/websensation/uMMPa

Answer 1

你标记了jQuery，所以我认为这可能会有所帮助。

尝试这样的事情：

$(document).ready(function() {
    $('#elementId').mouseenter(function() {
        $('body').fadeTo('fast',0.5);
    });
    $('#elementId').mouseout(function() {
        $('body').fadeTo('fast',1);
    });
});

其中elementId是导航菜单上的ID。

Answer 2

导航菜单和文档其余部分之间需要第三个元素<div class="modal-bg"></div>，就像过滤器类似于模态背景的工作方式，然后为此图层添加透明度，如：

.modal-bg {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

淡出导航菜单以外的所有内容是没有意义的。

+1 @somdow，@ user3161892，您的代码示例是什么？

菜单悬停，页面的透明度变为0.5

2 个答案: