JQuery для серых частей веб-страницы

Question

У меня есть дизайн, показанный на изображении ниже, и у меня есть требование, по которому пользователь может щелкнуть ссылку в прямоугольной области с именами A, B и C. Если щелкнуть ссылку здесь в окне B, все зеленая область должна выделяться серым цветом, кроме BOX B , и то же самое должно происходить с BOX A, C.

Пример, как показано на рисунке. Когда пользователь открывает страницу

Когда пользователь нажимает на ссылку BOX B

Я не уверен, возможно ли это, если есть какой-либо подобный пример, с которого я могу начать. Я искал, но не мог найти подобный пример. Обычно они связаны с серым цветом всей страницы.

Я могу сделать то же самое с помощью onmouseover и заменить целое изображение другим изображением, которое окружает область серым цветом. Но мне не разрешено делать это таким образом. Я не уверен, возможно ли это. Буду признателен, если вы укажете мне правильное направление или если это возможно для определенной области страницы серым цветом.

Эти страницы предназначены для сценариев PHP

Answer 1

Я создал для вас небольшой пример, который вы можете найти здесь:

http://jsfiddle.net/Srj82/

Это в основном использование простого CSS z-index для перекрытия / скрытия всего места, в то время как текущий выбранный элемент получил временно более высокое значение z-index, чем перекрывающееся <div>.

Вы заметите, хотя перекрывающийся <div> виден, вы все равно можете нажать на выбранное поле. Все остальное недоступно (без удаления обработчиков событий или около того). Просто потому, что есть другой элемент, который перекрывает остальные.

Answer 2

Вы можете попытаться разместить div над областью, где расположены A, B, C.В этом div у вас будет background-color примерно так:

#myDivHider{
    background-color:rgba(0,0,0,0.4);
    display:none;
}

Когда вы нажимаете a, b или c, вы «активируете» (display:block), все это и устанавливаете z.indexвашего а, б или в, что он встал "выше".

Альтернативой может быть плагин от jQueryTools, который называется Expose.

• http://jquerytools.org/demos/toolbox/expose/index.html

Answer 3

Есть несколько способов сделать это, но относительно быстрый и простой способ - сделать элементы, которые вам нужно выделить серым, одного и того же класса. Затем, когда вы выбираете элемент, присвойте этому элементу дополнительный класс и измените CSS для указанных выше элементов, за исключением выбранного элемента с дополнительным классом.

Это ссылка, описывающая один из способов сделать это.

Answer 4

Используйте оверлейный элемент div, который будет позиционироваться абсолютно над чем-либо еще на вашей странице с z-index, а затем установите z-index вашего поля с нажатием на равный + 1.

Answer 5

Один из способов сделать это - временно изменить положение элемента на absolute и присвоить ему максимум z-index, а затем добавить слой под ним, который будет действовать как наложение.

Вы также можете использовать плагин, например, такой: http://jquerytools.github.io/documentation/toolbox/expose.html

Answer 6

При нажатии кнопки A / B / C вы можете добавить наложение div с прозрачным серым цветом bg и увеличить z-индекс элемента, по которому щелкнули, выше, чем наложение.