如何淡出除jquery中的focus元素之外的所有元素？

Question

我在前端并不好.但现在我需要写一些jquery.我想要做的是我有一个文本框.它有许多父元素,包括HTML body标签.我想要做的是我希望将其他元素的所有颜色改变为不透明度,除了文本框聚焦时.它类似于bootstrap中的模态框.我的意思是褪色.那么请问我怎样才能做到这一点？

Answer 1

您可以添加一个巨大的box-shadow(100vmax足以覆盖所有视口),可能是一个短暂的过渡,input当它接收焦点时,元素,例如

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);
}

Codepen示例:http://codepen.io/anon/pen/pjpqjg

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

注意:在Safari上box-shadow,除非您设置 -webkit-appearance: none;,否则基于此效果不起作用,但您可以使用outline(在9.0版(9537.86.1.56.2)/ MacOS 10.9.5上测试)

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;
}

Codepen示例:http://codepen.io/anon/pen/pjpqRb