Javascript 如何淡出jQuery中除焦点元素之外的所有元素？

我不擅长前端。但是现在我需要编写一些jQuery。我想做的是我有一个文本框。它有许多父元素，包括HTML主体标记。我想做的是我想改变所有的颜色有点暗与不透明的其余元素，除了文本框时，它是重点

---

衰落有点像引导中的模态盒。如何实现这一点？

您可以在

输入

元素接收焦点时，向其添加一个巨大的

框阴影（
100vmax
足以覆盖所有视口），可能需要一个短的过渡，例如

input {
  box-shadow: 0 0 0 100vmax rgba(0,0,0, 0);
  transition: 1s box-shadow
}

input:focus {
  box-shadow: 0 0 0 100vmax rgba(0,0,0, .7);
}

代码笔示例：

当输入失去焦点时，效果会以相同的持续时间消失


注意：在Safari上，基于
框阴影的此效果不起作用
-webkit外观：无，但您可以使用
大纲
（在9.0版（9537.86.1.56.2）/MacOS 10.9.5上测试）

代码开放示例：
你能分享你的工作吗？也发布一些
html
。即使你做得不好，你也应该发布一些代码，并尝试以不同的方式思考。添加一个固定定位的不透明度为.7的“覆盖”div（例如），覆盖除文本框之外的所有元素（通过z索引实现），要比直接设置每个元素的不透明度容易得多。您需要提供code dude！！还有谁会考虑使用方块阴影？？？！。。。这很简单，效果也很好。你能解释一下为什么第二个不是黑色的吗？好办法！我没想到这个。唯一的（微小的，稍微不相关的）问题是它与IE8的兼容性问题：-与transition相同。是的，但IE8的市场份额非常低，在最坏的情况下，当此属性和vh/vw单元不受支持时，页面仍然有效。-@A.Wolff我看到了带有阴影的两个输入我是唯一一个对以下任何未被阴影的输入有问题的人：（甚至设置
z-index
）（在chrome上测试）@QuentinRoy没有任何修复程序可以为我解决它，使用outline或-webkit外观：（编辑：使用
显示：块；
和outline（如建议的那样）修复它，但输入不应该是块，所以…：(
input {
  outline: 100vmax rgba(0,0,0, 0) solid;
  -webkit-transition: 1s outline;
  transition: 1s outline;
}

input:focus {
  outline: 100vmax rgba(0,0,0, .7) solid;
}