Question

I am trying to highlight a certain set of elements on a page by dimming everything else on the page. The below Div and all its child elements I would like to keep full opacity and the rest, I would like to dim to about 50%. This Div just sits in the main body of the page.

    <div id="basket">

    <div id="basket-contents">

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


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

    </div>

</div>

I have tried the following in my JQuery, but it still dims the whole page, including this Div.

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

Can anyone point me in the right direction???

Thanks in advance.

Answer 1

If the opacity of all other elements in the page are changed and if the #basket div is inside any other element then this div will also get the opacity property inherited from the parent.

It would be better to place another div with page height and width and then put the stacking index of the #basket div to a higher value.