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的效果不起作用unless you set -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

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

1 个答案: