jquery - Onmouseover 不透明层除了选定的 block

Question

我希望当鼠标悬停在特定部分时，在除所选类(即表格)之外的所有内容上放置一个 OPACITY #fff 0.2 层

和你一样:

.tableHighlight:hover{background-color:#eee}
<table id='table-main' class='tableHighlight'>
...

但相反(将图层放在其他所有内容上，而不是表格本身)

Answer 1

我想我明白了。

$('#IDyouWant').on('mouseenter',function(){
    $('body').prepend('<div class="curtain"></div>'); // add a layer in front of everything
    $('#IDyouWant, .tableHighlight').css({'z-index':'10'}); //brings section and highlighted element to front.
}).on('mouseleave',function(){
   $('.curtain').remove(); // remove layer
   $('#IDyouWant, .tableHighlight').removeAttr('style'); //remove z-index from section and highlighted element
});

和 .curtain 的 CSS

.curtain {
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:#FFF;
    opacity:0.8;
    z-index:9;
}

fiddle :

http://jsfiddle.net/5Y3Hf/1/

更新:

请记住，您需要位于所有内容之前的元素必须在 css 中设置 position 属性。它可以是任何位置，在我的示例中它是 position:relative;，但是您必须为 z-index 作品设置 position