Question

我试图通过调暗页面上的其他内容来突出显示页面上的某些元素集。下面的Div及其所有子元素我想保持完全不透明度，其余的，我想调暗到约50％。这个Div只是位于页面的主体中。

    <div id="basket">

    <div id="basket-contents">

        <div id="basket-messages">
        </div>


        <div id="basket-items">
        </div>

    </div>

</div>

我在我的JQuery中尝试了以下内容，但它仍然使整个页面变暗，包括此Div。

    // On hover basket start...
$("#basket").hover(
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    },
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    }
);

有人能指出我正确的方向吗？

提前致谢。

Answer 1

如果页面中所有其他元素的不透明度发生变化，并且#basket div位于任何其他元素内，则此div也将获得从父级继承的opacity属性。

最好放置另一个具有页面高度和宽度的div，然后将#basket div的堆叠索引放到更高的值。

Answer 2

我不确定你是否需要通配符*选择器。另外，正如Jamiec所暗示的那样，从字符串中删除$：

$('*:not(#basket)').animate({opacity: 0.5}, 1);

另外，您是否看过一些插件代码（例如BlockUI），它是如何实现这一效果的呢？

编辑：

这是否有任何影响：

$('*[id!=basket]').animate({opacity: 0.5}, 1);

我已经在我自己的页面上以下列方式对此进行了测试：

alert($("*").length);                //returns '78'
alert($("*[id!=FundTable]").length); //returns '77'

所以我知道这很有效。你能用你的页面确认吗？

Answer 3

你是否尝试过没有$作为选择器的一部分：ie，

$(':not(#basket)').animate({opacity: 0.5}, 1);

从Jquery中的某个ID元素中选择所有APART

3 个答案: