JQuery «серый» остальной части страницы, кроме пользователя div на

Question

Я работаю над проектом панели инструментов, где арт-директор хочет иметь эффект, похожий на тот, который мы видим здесь:

http://www.asos.com/

За исключением случаев, когда пользователь наводит курсор на панель инструментов 'widget ', то есть наложение на все другие элементы на странице, включая тело, во многом таким же образом, как Colorbox и все.

Я думал о создании нового div, который охватывает всю ширину области просмотра сz-index 2, все неактивные виджеты имеют z-index 3, а активный зависший виджет имеет z-index 1.

Кто-нибудь видел или пытался это с большим эффектом?

Спасибо.

Answer 1

братьев и сестер

<ul class="listOfImages">
    <li><img ... /></li>
    <li><img ... /></li>
    <li><img ... /></li>
</ul>
<script>
 $('.listOfImages li').hover(function(){
    $(this).siblings().fadeOut();
 }, function(){
    $(this).siblings().fadeIn();
 }
 );
</script>