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

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

jsfiddle.net/websensation/uMMPa

来源

2014-01-05 WebSensation

向我们展示您的代码？到目前为止，你有什么？ – somdow

js小提琴请问？虽然我认为你应该使用CSS不透明属性 – Ajey

已经尝试在这里..但仍然没有工作.. http://jsfiddle.net/websensation/uMMPa – WebSensation

您标记jQuery的，所以我在想，这可能是有帮助的。

尝试这样：

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

哪里elementId是导航菜单上的ID。

来源

2014-01-05 05:31:58

你需要导航菜单和文件的其余部分之间的第三元素<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，你的代码示例是什么？

来源

2014-01-05 05:34:07

感谢您的想法。我尝试过它，仍然不起作用。在这里介意任何额外的帮助http://jsfiddle.net/websensation/uMMPa/ – WebSensation

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

回答

相关问题