Jquery到网页的灰色部分

Question

我有一个如下图所示的设计，我有一个要求，用户可以点击名为A，B＆amp;的矩形区域中的链接。 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

点击A / B / C后，你可以添加一个透明灰色bg颜色的div叠加层，并将点击元素的z-index增加到高于叠加层。

Answer 3

执行此操作的一种方法是暂时将元素的位置更改为absolute并将其设置为高z-index，然后在其下方添加一个可用作叠加层的图层。

您也可以使用插件，例如：http://jquerytools.github.io/documentation/toolbox/expose.html

Answer 4

使用覆盖div，它将使用z-index绝对位于页面上的任何其他位置，然后将单击框的z-index设置为overlay + 1。

Answer 5

有几种方法可以做到这一点，但是一种相对快速和简单的方法是使你需要灰色的元素属于同一个类。然后，当您选择一个项目时，为该元素添加一个附加类，并更改上面命名的元素的css，除了带有附加类的所选元素。

This is a link describing one way to accomplish this.

Answer 6

您可以尝试在放置A，B，C的区域放置div。 在这个div中，您将有一个background-color，如此：

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

当您点击a，b或c时，您“激活”（display:block），整个事情并设置a，b或C的z.index，它会变得“更高”。

另一种选择是来自jQueryTools的插件，名为Expose。

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